[JavaScript] - Menu

0

Czesc!
Robie sobie w js menu, wczesniej wiecej robilem we flashu , ale teraz postanowilem nauczyc sie js, zrobilem sobie menu ale cos nie bardzo dziala jak powinno i nie wiem czemu niby wszstko dobrze dziala jak sie tylko nad jednym linkiem myszka najezdza ale jak na wiecej to juz cos sie kopie, mam nadzieje ze zna tu ktos dobrze js i podpowie co jest w tym skrypcie zle. Z gory Thx za wszelka pomoc

<html>

<head>
<title></title>
<style type="text/css">
a{height:20px;margin:5px;font-family:verdana;font-size:20px;display:block;width:100px;}
</style>
<script type="text/javascript">

var id=new Array("link0","link1","link2");
var start=new Array(0,0,0);
var koniec=new Array(30,30,30);
var frame=new Array(0,0,0);
var kier=new Array(-1,-1,-1);
var time=new Array;

for(i=0;i<3;i++){
time[i]=setTimeout('',0);}


function anim (strona,nr)
{
if(kier[nr]!=strona){
clearTimeout(time[nr]);
kier[nr]=strona;
}
frame[nr]+=kier[nr];
element=document.getElementById(id[nr]);
element.style.color="rgb(10,"+frame[nr]*5+",10)";
element.style.backgroundColor="rgb("+(255-frame[nr]*10)+","+(255-frame[nr]*10)+","+(255-frame[nr]*5)+")";

if((frame[nr]>start[nr])&&(frame[nr]<koniec[nr])){s2=strona;nr2=nr;
time[nr]=setTimeout("anim(s2,nr2)",10);
}
}
</script>
</head>
<body>

<a id="link0" onmouseover="anim(1,0)" onmouseout="anim(-1,0)" >Menu</a><br>
<a id="link1" onmouseover="anim(1,1)" onmouseout="anim(-1,1)" >Menu</a><br>
<a id="link2" onmouseover="anim(1,2)" onmouseout="anim(-1,2)" >Menu</a><br>

</body>
</html>
0

to chyba zmiana koloru tła linka jest a nie menu ;) tak na pierwszy rzut oka to przekombinowałeś z funckcją setTimeout, po najechaniu na jeden link działa, a gdy najeżzasz na kolejny to wartości są nadpisywane i zatrzymuje się wykonywanie skryptu zmiany koloru dla pierwszego linka.

0

Thx za odpowiedz, no to jak moge zrobic aby setTime out sie nie nadpisywalo ??

0 
<html>

<head>
<title></title>
<style type="text/css">
a{height:20px;margin:5px;font-family:verdana;font-size:20px;display:block;width:100px;}
</style>
<script type="text/javascript">


var start=0;
var koniec=30;



function anim (obj,strona,frame)
{
frame+=strona;
element=document.getElementById('a'+obj);
element.style.color="rgb(10,"+frame*5+",10)";
element.style.backgroundColor="rgb("+(255-frame*10)+","+(255-frame*10)+","+(255-frame*5)+")";

if((frame>start)&&(frame<koniec)){
setTimeout("anim("+obj+","+strona+","+frame+")",10);
}  
}
</script>
</head>
<body>

<a id="a1" onmouseover="anim(1,1,0)" onmouseout="anim(1,-1,30)">Menu</a><br>
<a id="a2" onmouseover="anim(2,1,0)" onmouseout="anim(2,-1,30)">Menu</a><br>
<a id="a3" onmouseover="anim(3,1,0)" onmouseout="anim(3,-1,30)">Menu</a><br>
<a id="a4" onmouseover="anim(4,1,0)" onmouseout="anim(4,-1,30)">Menu</a><br>
<a id="a5" onmouseover="anim(5,1,0)" onmouseout="anim(5,-1,30)">Menu</a><br>
<a id="a6" onmouseover="anim(6,1,0)" onmouseout="anim(6,-1,30)">Menu</a><br>

</body>
</html>

zmieniłem lekko kod - pisany z głowy, nie testowany, ale myśle że bedzie działał

1 użytkowników online, w tym zalogowanych: 0, gości: 1