mouserover effekt
HejJeg har en mouseover, der virker ved at skifte baggrundsfarven på et lag til fx grøn onmouseover. Onmouseout skifter farven først til lysegrøn for dernæst at skifte til ingen baggrundsfarve. Det fungerer fint, men jeg har behov for eksekvere denne effekt på 30 forskellige lag.
Findes der en mere elegant måde at gøre det på, end det jeg selv har lavet, hvor jeg kalder en ny funktion for hver lag?
Her er et eksempel på koden, som den ser ud, når jeg har 5 forskellige lag.
<html>
<head>
<title>Mouseover</title>
<script>
var timer1;var timer2;var timer3;var timer4;var timer5;
var a = document.getElementById;
function overmenu(id) {id.style.backgroundColor='#9AAB75';}
function unmenu1() {a('1').style.backgroundColor='#B6C498'; timer1 = setTimeout("a('1').style.backgroundColor='';",160);}
function unmenu2() {a('2').style.backgroundColor='#B6C498'; timer2 = setTimeout("a('2').style.backgroundColor='';",160);}
function unmenu3() {a('3').style.backgroundColor='#B6C498'; timer3 = setTimeout("a('3').style.backgroundColor='';",160);}
function unmenu4() {a('4').style.backgroundColor='#B6C498'; timer4 = setTimeout("a('4').style.backgroundColor='';",160);}
function unmenu5() {a('5').style.backgroundColor='#B6C498'; timer5 = setTimeout("a('5').style.backgroundColor='';",160);}
</script>
</head>
<body>
<div id="1" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this);clearTimeout(timer1);" onMouseOut="unmenu1();">a</div>
<div id="2" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this);clearTimeout(timer2);" onMouseOut="unmenu2();">b</div>
<div id="3" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this);clearTimeout(timer3);" onMouseOut="unmenu3();">c</div>
<div id="4" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this);clearTimeout(timer4);" onMouseOut="unmenu4();">d</div>
<div id="5" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this);clearTimeout(timer5);" onMouseOut="unmenu5();">e</div>
</body>
</html>
