Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[JavaScript] image/onMouseOver

Anoniem
dvdgiessen
2 antwoorden
  • 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.
  • [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:

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.