30. april 2006 - 01:39
Der er
2 kommentarer og 1 løsning
mouserover effekt
Hej Jeg 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>
Annonceindlæg fra Jysk IT
Sikkerhed skal være en del af driften
Skal virksomheder stå stærkere mod angreb og kunne udvikle sig, skal sikkerhed, drift og forretning tænkes sammen. Det er tanken bag Jysk IT’s ambition om at skabe en “sikker fremtid” for kunderne.
30. april 2006 - 02:35
#1
Jeg opdagede lige at ovenstående kode kun virker i Internet Explorer. Her er en tilrettet version: <html> <head> <title>Mouseover</title> <script> var timer1;var timer2;var timer3;var timer4;var timer5; function overmenu(id) {id.style.backgroundColor='#9AAB75';} function unmenu1() {document.getElementById('1').style.backgroundColor='#B6C498'; timer1 = setTimeout("document.getElementById('1').style.backgroundColor='';",160);} function unmenu2() {document.getElementById('2').style.backgroundColor='#B6C498'; timer2 = setTimeout("document.getElementById('2').style.backgroundColor='';",160);} function unmenu3() {document.getElementById('3').style.backgroundColor='#B6C498'; timer3 = setTimeout("document.getElementById('3').style.backgroundColor='';",160);} function unmenu4() {document.getElementById('4').style.backgroundColor='#B6C498'; timer4 = setTimeout("document.getElementById('4').style.backgroundColor='';",160);} function unmenu5() {document.getElementById('5').style.backgroundColor='#B6C498'; timer5 = setTimeout("document.getElementById('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>
30. april 2006 - 04:26
#2
Eksempel: <html> <head> <title>Mouseover</title> <script type="text/JavaScript" language="JavaScript"> function overmenu(divid) { document.getElementById(divid).style.backgroundColor='#9AAB75'; } function unmenu(divid) { document.getElementById(divid).style.backgroundColor='#B6C498'; setTimeout("document.getElementById('" + divid + "').style.backgroundColor='';",160); } </script> </head> <body> <div id="1" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this.id);" onMouseOut="unmenu(this.id);">a</div> <div id="2" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this.id);" onMouseOut="unmenu(this.id);">b</div> <div id="3" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this.id);" onMouseOut="unmenu(this.id);">c</div> <div id="4" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this.id);" onMouseOut="unmenu(this.id);">d</div> <div id="5" style="width:34px;cursor:pointer;text-align:center" onMouseOver="overmenu(this.id);" onMouseOut="unmenu(this.id);">e</div> </body> </html> /theSurfer