Mycket enkel rollover

Om man har endast några få bilder och om man vill ha en bild som används om musen är ovanpå bilden och en som används i annat fall kan man göra följande:

Sätt in följande kod i HTML dokumentet:

<script language="JavaScript">
<!--
// vi kollar om browsern klarar av images. om den inte gör detta är
// document.images = undefined = false
// behöver inte kolla netscape och explorer versionsnummer...
if (document.images)
{
    // följande kod laddar två bilder som är 24 pixels breda
    // och 18 pixels höga

    // variabeln bild är en Image som är 24*18
    bild = new Image(24,18);
    // variabeln bild skall innehålla bilden bild.gif
    bild.src = "bild.gif";
    // variabeln bild_aktiv är en Image som är 24*18
    bild_aktiv = new Image(24,18);
    // variabeln bild_aktiv skall innehålla bilden bild_upp.gif
    bild_aktiv.src = "bild_upp.gif";
}

function doOver( )
{
    if (document.images)
        // sätt bilden till den bild som finns i variabeln bild_aktiv
        bilden.src = bild_aktiv.src;
}

function doOut( )
{
    if (document.images)
        // sätt bilden till den bild som finns i variabeln bild
        bilden.src = bild.src;
}

//-->
</script>

<a href="http://www.somewhere.com"
    onmouseover="doOver( )"
    onmouseout="doOut( )">
<img name="bilden" src="bild.gif" width=24 height=18 border=0>
</a>

Koden fungerar så att när man för musen ovanpå länken (obs! INTE bilden utan länken) så kommer onmouseover att köra Javascriptkoden doOver. Idenna funktion kommer den bild som har namnet bilden (name="bilden") att få som källa (src) den bild som finns färdigt laddad i variabeln bild_aktiv. När musen förs bort körs doOut som sätter src till den bild som finns i variabeln bild.

Nedan kan du se detta i praktiken:

Observera att bilden inte måste vara en länk för att kunna bytas. Följande fungerar också:

<a href="http://www.somewhere.com"
    onmouseover="doOver( )"
    onmouseout="doOut( )">
En vanlig textlänk...
</a> ...

<img name="bilden" src="bild.gif" width=24 height=18 border=0>

En vanlig textlänk...