Voorbeeld van 'Muis-rollover' met JavaScript

Aanklikken brengt je in dit geval terug naar het menu

Webdesign menu

Zo functioneert het script:
Bekijk broncode van deze pagina in je HTML editor of selecteer in je browser 'Beeld -> Bron' (IE), 'View -> Page Source' (NS) of 'View -> Source (Opera).

De eerste regels in het programma definiëren twee variabelen en halen de twee aangegeven afbeeldingen op, die worden opgeslagen in de variabelen. Met deze techniek zijn de afbeeldingen al geladen en kunnen ze sneller worden verwisseld.

Zodra u met de muisaanwijzer de afbeelding raakt, treedt het proces onMouseOver op, dat de functie swap oproept en twee parameters meegeeft. De eerste geeft aan welke afbeelding op de webpagina, beginnend bij 0, moet worden verwisseld. De tweede parameter geeft aan welke vooraf geladen pagina moet worden weergegeven. In swap() wordt dan de zichtbare afbeelding op de pagina vervangen door de afbeelding die is opgegeven met de variabelen.

Raakt de muisaanwijzer de afbeelding niet meer, dan treedt onMouseOut op en volgens dezelfde methode wordt de dan zichtbare afbeelding weer vervangen door de vorige.