mám na stránke takéto menu:
js
function invisible(theDiv) {
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "none")?"":"none";
}
function visible(theDiv) {
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "inline")?"":"inline";
}
html
<div id="menu">
<div id="l1"></div>
<div id="l2"></div>
<div onmouseout="visible('l3');invisible('l3h');" id="l3h"></div>
<div onmouseover="visible('l3h');invisible('l3');" id="l3"></div>
<div id="l4"></div>
<div onmouseout="visible('l5');invisible('l5h');" id="l5h"></div>
<div onmouseover="visible('l5h');invisible('l5');" id="l5"></div>
<div id="l6"></div>
<div onmouseout="visible('l7');invisible('l7h');" id="l7h"></div>
<div onmouseover="visible('l7h');invisible('l7');" id="l7"></div>
<div id="l8"></div>
<div onmouseout="visible('l9');invisible('l9h');" id="l9h"></div>
<div onmouseover="visible('l9h');invisible('l9');" id="l9"></div>
<div id="l10"></div>
<div onmouseout="visible('l11');invisible('l11h');" id="l11h"></div>
<div onmouseover="visible('l11h');invisible('l11');" id="l11"></div>
<div id="l12"></div>
<div onmouseout="visible('l13');invisible('l13h');" id="l13h"></div>
<div onmouseover="visible('l13h');invisible('l13');" id="l13"></div>
</div>
css
div#links {
width: 780px;
height: 35px;
background-image: url(styleimg/bgl.jpg);
}
div#links div {
float: left;
background-repeat:norepeat;
margin: auto;
}
div#links div#l1 {
background-image: url(styleimg/links1.jpg);
width: 143px;
height: 35px;
}
div#links divx#l2 {
width: 38px;
height: 35px;
}
div#links div#l3 {
background-image: url(styleimg/links2.png);
width: 60px;
height: 35px;
}
div#links div#l3h {
background-image: url(styleimg/links2h.png);
width: 60px;
display: none;
height: 35px;
}
div#links div#l4 {
width: 43px;
height: 35px;
}
div#links div#l5 {
background-image: url(styleimg/links3.png);
width: 50px;
height: 35px;
}
div#links div#l5h {
background-image: url(styleimg/links3h.png);
width: 50px;
display: none;
height: 35px;
}
div#links div#l6 {
width: 42px;
height: 35px;
}
div#links div#l7 {
background-image: url(styleimg/links4.png);
width: 48px;
height: 35px;
}
div#links div#l7h {
background-image: url(styleimg/links4h.png);
width: 48px;
height: 35px;
display: none;
}
div#links div#l8 {
width: 44px;
height: 35px;
}
div#links div#l9 {
background-image: url(styleimg/links5.png);
width: 84px;
height: 35px;
}
div#links div#l9h {
background-image: url(styleimg/links5h.png);
width: 84px;
height: 35px;
display: none;
}
div#links div#l10 {
width: 45px;
height: 35px;
}
div#links div#l11 {
background-image: url(styleimg/links6.png);
width: 71px;
height: 35px;
}
div#links div#l11h {
background-image: url(styleimg/links6h.png);
width: 71px;
height: 35px;
display: none;
}
div#links div#l12 {
width: 43px;
height: 35px;
}
div#links div#l13 {
background-image: url(styleimg/links7.png);
width: 59px;
height: 35px;
}
div#links div#l13h {
background-image: url(styleimg/links7h.png);
width: 59px;
height: 35px;
display: none;
}
normálne je zobrazený div, ktorý obsahuje čierny obrázok, a po prejdení naň sa obrázok vymení za zelení a keď ukážem mimo tak sa vráti do pôvodnej farby
všetko funguje ok len keď behám rýchlo myšou z jedného obrázka na druhý tak to vyzerá ako by to počítač nestihol zaznamenať a obrázok zostane zelený a takýmto spôsob môžu byť "vybrané všetky obrázky" čo by byť nemalo
kde mám chybu?