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

Let op! Deze techniek werkt niet bij alle browsers. Iemand heeft minimaal Netscape3.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 dezevoorzien 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 JavaScriptwelke er voor zorgt dat de opdracht wordt uitgevoerd wanneer de muis over het oude plaatjegaat.:

<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 verschijntals de muis buiten het plaatje komt. Hiervoor moet je een 'onMousOut event handler' aan delink 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 plaatjedat je wil laden door de volgende code toe te voegen aan het javascript in de head van jepagina.

naamplaatje = new Image();

                    naamplaatje.src = "plaatje2.gif";

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

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

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

                    </A>