JavaScript voorbeeld

Een plaatje veranderen als iemand er met zijn muis overheen gaat.

Let op! Deze techniek werkt niet bij alle browsers. Iemand heeft minimaal Netscape 3.0 nodig of Internet Explorer 4.0.

De manier waarop je zo'n html-bestand maakt:

<A href=paginanaam.html>

    <IMG src=oud.gif border=0>

    </A>

Het plaatje moet een link zijn om het script te laten werken. Wilt u het plaatje geen eche link wilt laten zijn, maak de link dan naar "#".

Om duidelijk te kunnen maken welk plaatje op de pagina dient te veranderen moet u deze voorzien van een naam:

<A href=paginanaam.html>

    <IMG src=oud.gif border=0 name=veranderPlaatje>

    </A>

Voeg nu de volgende JavaScript code toe tussen <head> en </head> van uw pagina:

<SCRIPT language="javascript1.1">

      oudPlaatje = new Image();

      oudPlaatje.src = "oud.gif";

      nieuwPlaatje = new Image();

      nieuwPlaatje.src = "nieuw.gif";

function plaatjesVeranderen(cImg,ref) { document.images[cImg].src = ref.src; } </SCRIPT>

Voeg dan een zogenaamde onMousOver event handler toe aan de link. Dit is JavaScript welke er voor zorgt dat de opdracht wordt uitgevoerd wanneer de muis over het oude plaatje gaat.:

<A href=paginanaam.html onMouseOver="plaatjesVeranderen('veranderPlaatje',nieuwPlaatje)">

    <IMG src=oud.gif border=0 name=veranderPlaatje>

    </A>

Wanneer je dat wil, dan kun je er voor zorgen dat het eerste plaatje weer verschijnt als de muis buiten het plaatje komt. Hiervoor moet je een 'onMousOut event handler' aan de link toevoegen:

<A href=paginanaam.html
    onMouseOver="plaatjesVeranderen('veranderPlaatje',nieuwPlaatje)" onMouseOut="plaatjesVeranderen('veranderPlaatje',oudPlaatje)">

    <IMG src=oud.gif border=0 name=veranderPlaatje>

    </A>

Meerdere plaatjes op een pagina.
zet ieder plaatje in een link en voorzie het van een unieke naam:

<A href=paginanaam.html> <IMG src=plaatje.gif border=0
    name=naamplaatje>

    </A>

Zorg dat de plaatjes vooraf geladen worden. Maak daartoe een 'object' voor elk plaatje dat je wil laden door de volgende code toe te voegen aan het javascript in de head van je pagina.

naamplaatje = new Image();

      naamplaatje.src = "plaatje2.gif";

Om nu het plaatje te veranderen wanneer de muis er overheen rolt maken we de code compleet:

<A href=paginanaam.html onMouseOver="plaatjesVeranderen('image1',naamnieuwPlaatje)" 
      onMouseOut="plaatjesVeranderen('image2',naamoudPlaatje)">

    <IMG src=plaatje.gif border=0 name=naamoudPlaatje>

    </A>