Scholieren.com forum - [JS] Event handlers..

Scholieren.com forum (https://forum.scholieren.com/index.php)

- Software & Hardware (https://forum.scholieren.com/forumdisplay.php?f=20)

- - [JS] Event handlers.. (https://forum.scholieren.com/showthread.php?t=276829)

[JS] Event handlers..

OK. Ik zit dus met iets waar ik niet 123 uit kom; te weten OnMouseOut, OnMouseOver en OnClick.

Wat ik wil: een stukje code die er voor zorgt dát..

- Wanneer de OnMouseOver getriggered wordt er een ánder plaatje voor in de plaats komt.

- Wanneer de OnClick getriggered wordt er weer een ánder plaatje in de plaats komt.

Máár..

Wanneer de OnMouseOut getriggered wordt, moet het OnClick-plaatje blijven staan.

Én..

Wanneer er een ánder plaatje getriggered wordt; moet deze ook permanent (tot een andere OnClick) getriggered worden, en moet het vórige plaatje (van de OnClick) weer terugschieten naar haar oorspronkelijke vorm.

Ter illustratie: ik heb 't zelf geprobeerd (dirty-style) met een If-je en een tellertje. Maar dan moet je A. telkens álle tellers op nul zetten (en dat staat niet netjes in de code) en B. kreeg ik de andere OnClicks niet terug.

Code:

<tr><td><p><a href="../html/dev.html" onMouseOver="document.pic2.src='../menu/bezoek-o.jpg'"

                                  onMouseOut="document.pic2.src='../menu/bezoek.jpg'" target="main">

    <img src="../menu/bezoek.jpg" border="0" name="pic2"></a></p></tr>

Werkt dus ook niet, aangezien OnMouseOut de OnClick-trigger 0wnt.

Kan iemand mij wellicht een simpel doch doeltreffend script voorkauwen die 't wél doet? Heb al gezocht op internet naar voorbeelden, maar daar kwam er eigenlijk maar één uit voort en die was bizar complex om uit te pluizen, laat staan te begrijpen.

Maak een simpele functie voor je OnMouseOut met wat conditionele statements om de huidige status van het plaatje te checken.

Citaat:

Manuzhai schreef:
Maak een simpele functie voor je OnMouseOut met wat conditionele statements om de huidige status van het plaatje te checken.

Sorry, maar hier heb ik dus helemaal niets aan. Ik weet wat er gebeurd moet worden, maar mijn kennis van JS is daar niet toe in staat. En om nou dagenlang op zo'n redelijk onbelangrijk klotestukje te ploeteren is me wat teveel moeite. Daarom vroeg ik ook naar een voorgekauwd stukje?

Helaas, dan kan ik je niet helpen... Ik weet zelf ook maar net genoeg van JavaScript om in mijn eigen behoeften te kunnen voorzien (en die zijn er nauwelijks).

Is d'r dan hélemaal niemand?

*snif*

euhm... 2 globale variablen bijhouden waar je de huidige en vorige afbeelding inzet?

*denkt*
zoiets?

Code:

<script type="text/javascript">

var cVorige = '';

var cHuidige = '../menu/bezoek.jpg';



function uit( id )

{

  document.getElementById( id ).src = cVorige;

}



function over( id )

{

  cVorige = cHuidige;

  cHuidige = '../menu/bezoek-o.jpg';

  document.getElementById( id ).src = cHuidige;

}



function klik( id )

{

  cHuidige = '../menu/bezoek-o1.jpg';

  document.getElementById( id ).src = cHuidige;

}

</script>



*knip*



<img id='test' scr='../menu/bezoek.jpg' alt='' onmouseover="over( 'test' )" onmouseout="uit( 'test' )" onclick="klik( 'test' )">

Citaat:

eddie schreef:
euhm... 2 globale variablen bijhouden waar je de huidige en vorige afbeelding inzet?

*denkt*

Maar is dat weer niet een beetje omslachtig; ik heb dus een stuk of 7 <a href>'s die allemaal moeten. Voor zover ik die code begrijp is dat allemaal voor één link?

Oh, fijn trouwens dat je me wilt helpen!

Had d'r nog een scriptje voor liggen:

Code:



<SCRIPT LANGUAGE="JavaScript">

<!--

if (navigator.appVersion.indexOf("2.") != -1) {

        check = false;

}

if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)) {

        check = false;

} else {

        check = true;

}



if (check == true) {

        one_ = new Image();

        one_.src = "../images/menu_1.jpg";

        one_on = new Image();

        one_on.src = "../images/menu_1_on.jpg";

        one_stay = new Image();

        one_stay.src = "../images/menu_1_on.jpg";



        two_ = new Image();

        two_.src = "../images/menu_2.jpg";

        two_on = new Image();

        two_on.src = "../images/menu_2_on.jpg";

        two_stay = new Image();

        two_stay.src = "../images/menu_2_on.jpg";

        

        three_ = new Image();

        three_.src = "../images/menu_3.jpg";

        three_on = new Image();

        three_on.src = "../images/menu_3_on.jpg";

        three_stay = new Image();

        three_stay.src = "../images/menu_3_on.jpg";

        

        four_ = new Image();

        four_.src = "../images/menu_4.jpg";

        four_on = new Image();

        four_on.src = "../images/menu_4_on.jpg";

        four_stay = new Image();

        four_stay.src = "../images/menu_4_on.jpg";

        

        five_ = new Image();

        five_.src = "../images/menu_5.jpg";

        five_on = new Image();

        five_on.src = "../images/menu_5_on.jpg";

        five_stay = new Image();

        five_stay.src = "../images/menu_5_on.jpg";

}



imageStay = ""



function imageon(name) {

        if (imageStay != name) {

                document[name].src = eval(name + "on.src");

        }

}

function imageoff(name) {

        if (imageStay != name) {

                document[name].src = eval(name + ".src");

        }

}



function on(name,tekst) {

        if (check == true) {

                imageon(name);

                self.status=tekst;

        }

}

function off(name){

        if (check == true) {

                imageoff(name);

                self.status='';

        }

}



function stay(name) {

        if (check == true) {

                document[name].src = eval(name + "stay.src");

                if (imageStay != name) {

                        if (imageStay != "") {

                                document[imageStay].src = eval(imageStay + ".src");

                        }

                }

                imageStay = name;

        }

}





//  -->

</SCRIPT>

de links werken als volgt:

Code:

<a href="bla.html" onMouseOver="on('one_',''); return true;" onMouseOut="off('one_'); return true;" onClick="stay('one_'); return true"><img src="../images/menu_1.jpg" name="one_" alt="" border="0"></a>

Denk dat je hieruit ongeveer wel moet kunnen halen wat je nodig hebt...

Citaat:

Dobermann schreef:
Maar is dat weer niet een beetje omslachtig; ik heb dus een stuk of 7 <a href>'s die allemaal moeten. Voor zover ik die code begrijp is dat allemaal voor één link?

Ja, maar je kunt de functie uitbreiden :)

Bijvoorbeeld, maak van cHuidig en cVorig een array, en geef aan de functie een nummertje mee, voor welk element je moet hebben. :)

Citaat:

Dobermann schreef:

Oh, fijn trouwens dat je me wilt helpen!

NP (y)

Citaat:

eddie schreef:
Ja, maar je kunt de functie uitbreiden :)

Bijvoorbeeld, maak van cHuidig en cVorig een array, en geef aan de functie een nummertje mee, voor welk element je moet hebben. :)

Je hebt gelijk :> Ik ga 't proberen; als ik d'r niet uitkom weet ik je wel te vinden :)

Citaat:

Dobermann schreef:
Je hebt gelijk :> Ik ga 't proberen; als ik d'r niet uitkom weet ik je wel te vinden :)