Ga naar inhoud

[JavaScript] image/onMouseOver


Aanbevolen berichten

Ik heb een webpagina met daarop 5 plaatjes die met onMouseOver/onMouseOut veranderen, zo dat als je over plaatje 1 gaat dat alleen plaatje 1 veranderd, over 2 veranderd 1+2, over 3 veranderd 1+2+3 etc. Alle 5 plaatjes zijn dezelfde GIF (en hun onMouseOver ook). Ik heb het nu opgelost door alle plaatjes apart te veranderen: [code:1:456a068ea8]<html> <head> <script> s10 = new Image; s10.src = "01.gif"; s11 = new Image; s11.src = "02.gif"; s20 = new Image; s20.src = "01.gif"; s21 = new Image; s21.src = "02.gif"; s30 = new Image; s30.src = "01.gif"; s31 = new Image; s31.src = "02.gif"; s40 = new Image; s40.src = "01.gif"; s41 = new Image; s41.src = "02.gif"; s50 = new Image; s50.src = "01.gif"; s51 = new Image; s51.src = "02.gif"; function SwapSter(imgnaam, imgscr) { document.images[imgnaam].src = eval(imgscr + ".src"); } </script> </head> <body> <a href="#" onMouseOver="SwapSter('ster1','s11')" onMouseOut="SwapSter('ster1','s10')"><img name="ster1" src="01.gif"></a><br> <a href="#" onMouseOver="SwapSter('ster1','s11');SwapSter('ster2','s21')" onMouseOut="SwapSter('ster1','s10');SwapSter('ster2','s20')"><img name="ster2" src="01.gif"></a><br> <a href="#" onMouseOver="SwapSter('ster1','s11');SwapSter('ster2','s21');SwapSter('ster3','s31')" onMouseOut="SwapSter('ster1','s10');SwapSter('ster2','s20');SwapSter('ster3','s30')"><img name="ster3" src="01.gif"></a><br> <a href="#" onMouseOver="SwapSter('ster1','s11');SwapSter('ster2','s21');SwapSter('ster3','s31');SwapSter('ster4','s41')" onMouseOut="SwapSter('ster1','s10');SwapSter('ster2','s20');SwapSter('ster3','s30');SwapSter('ster4','s40')"><img name="ster4" src="01.gif"></a><br> <a href="#" onMouseOver="SwapSter('ster1','s11');SwapSter('ster2','s21');SwapSter('ster3','s31');SwapSter('ster4','s41');SwapSter('ster5','s51')" onMouseOut="SwapSter('ster1','s10');SwapSter('ster2','s20');SwapSter('ster3','s30');SwapSter('ster4','s40');SwapSter('ster5','s50')"><img name="ster5" src="01.gif"></a><br> </body> </html>[/code:1:456a068ea8] Op een gegeven moment krijg je erg veel code dus... ik vroeg me af of dit op een (handige) manier in te korten is... uiteraard met behoud van functionaliteit, want daar ben ik tevreden mee.
Link naar reactie
[code:1:16f1cc5bd7]<script type="text/javascript"> <!-- var s0 = new Image(); s0.src = "01.gif"; var s1 = new Image(); s1.src = "02.gif"; function SwapSterren(nr,isAan) { var swapImg = isAan ? "s0" : "s1"; for (var i=1;i<=nr;i++) document.images["ster" + i].src = eval(swapImg + ".src"); } //--> </script> ... <a href="#" onMouseOver="SwapSterren(1,true);" onMouseOut="SwapSterren(1,false);"><img name="ster1" src="01.gif"></a><br> <a href="#" onMouseOver="SwapSterren(2,true);" onMouseOut="SwapSterren(2,false);"><img name="ster2" src="01.gif"></a><br> <a href="#" onMouseOver="SwapSterren(3,true);" onMouseOut="SwapSterren(3,false);"><img name="ster3" src="01.gif"></a><br>[/code:1:16f1cc5bd7] Zo misschien? Ik heb hem niet getest, dus ik garandeer niet dat er geen fouten in zullen zitten :wink:
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

  • Populaire leden

    Er is nog niemand die deze week reputatie heeft ontvangen.

  • Leden

    Geen leden om te tonen

×
×
  • Nieuwe aanmaken...