pootrzebuję pilnie stworzyć menu działające identycznie jak na http://mootools.net/ (chodzi o te kolorowe duże menu)
Jako że w JS jestem laikiem po kilku męcząych godzinach pracy napisałem coś takiego:
Kod
<script>
animeInt=null;
odlicz=0;
blokada=0;
function powieksz(ktore)
{
if (blokada==0){
odlicz++;
// glowny
objl=document.getElementById("element_"+ktore);
objl.style.width = parseInt(objl.style.width) + 8 + 'px';
//nastepne
for (i=ktore; i<4; i++){
obj=document.getElementById("element_"+eval(ktore+i));
obj.style.width = parseInt(obj.style.width) - 1 + 'px'; }
animeInt=setTimeout("powieksz("+ktore+")", 3)
}
if (odlicz==10) {clearTimeout(animeInt); blokada=1;}
window.status=odlicz+", "+blokada;
}
function zmniejsz(ktore)
{
if (blokada==1){
odlicz--;
// glowny
objl=document.getElementById("element_"+ktore);
objl.style.width = parseInt(objl.style.width) - 8 + 'px';
//nastepne
for (i=ktore; i<4; i++){
objp=document.getElementById("element_"+eval(ktore+i));
objp.style.width = parseInt(objp.style.width) + 1 + 'px'; }
animeInt=setTimeout("zmniejsz("+ktore+")", 3)
}
if (odlicz==0) { blokada=0; clearTimeout(animeInt);}
window.status=odlicz+", "+blokada;
}
</script>
<font color=white>
<div id="element_4" class="menu" style="float:left; width:90px; position:relative; left:0px; background-color:black;"></div>
<div id="element_5" class="menu" style="float:left; width:90px; position:relative; left:0px; background-color:black;"></div>
<div id="element_6" class="menu" style="float:left; width:90px; position:relative; left:0px; background-color:black;"></div>
<table><tr>
<td id="element_0" class="menu" onmouseover="powieksz(0)" onmouseout="zmniejsz(0)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
<td id="element_1" class="menu" onmouseover="powieksz(1)" onmouseout="zmniejsz(1)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
<td id="element_2" class="menu" onmouseover="powieksz(2)" onmouseout="zmniejsz(2)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
<td id="element_3" class="menu" onmouseover="powieksz(3)" onmouseout="zmniejsz(3)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
</tr></table>
</font>
animeInt=null;
odlicz=0;
blokada=0;
function powieksz(ktore)
{
if (blokada==0){
odlicz++;
// glowny
objl=document.getElementById("element_"+ktore);
objl.style.width = parseInt(objl.style.width) + 8 + 'px';
//nastepne
for (i=ktore; i<4; i++){
obj=document.getElementById("element_"+eval(ktore+i));
obj.style.width = parseInt(obj.style.width) - 1 + 'px'; }
animeInt=setTimeout("powieksz("+ktore+")", 3)
}
if (odlicz==10) {clearTimeout(animeInt); blokada=1;}
window.status=odlicz+", "+blokada;
}
function zmniejsz(ktore)
{
if (blokada==1){
odlicz--;
// glowny
objl=document.getElementById("element_"+ktore);
objl.style.width = parseInt(objl.style.width) - 8 + 'px';
//nastepne
for (i=ktore; i<4; i++){
objp=document.getElementById("element_"+eval(ktore+i));
objp.style.width = parseInt(objp.style.width) + 1 + 'px'; }
animeInt=setTimeout("zmniejsz("+ktore+")", 3)
}
if (odlicz==0) { blokada=0; clearTimeout(animeInt);}
window.status=odlicz+", "+blokada;
}
</script>
<font color=white>
<div id="element_4" class="menu" style="float:left; width:90px; position:relative; left:0px; background-color:black;"></div>
<div id="element_5" class="menu" style="float:left; width:90px; position:relative; left:0px; background-color:black;"></div>
<div id="element_6" class="menu" style="float:left; width:90px; position:relative; left:0px; background-color:black;"></div>
<table><tr>
<td id="element_0" class="menu" onmouseover="powieksz(0)" onmouseout="zmniejsz(0)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
<td id="element_1" class="menu" onmouseover="powieksz(1)" onmouseout="zmniejsz(1)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
<td id="element_2" class="menu" onmouseover="powieksz(2)" onmouseout="zmniejsz(2)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
<td id="element_3" class="menu" onmouseover="powieksz(3)" onmouseout="zmniejsz(3)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>
</tr></table>
</font>
^ działanie skryptu odbiega od tego na którym się wzoruje.
Dlatego zwracam się do Was z ogromną prośbą pomocy.
Z góry serdcznie dziękuje i czekam na odpowiedź, pozdrawiam..