JavaScript voorbeelden

Plaatjes wisselen

m een ander plaatje te tonen zodra je er met de muis overheen gaat, kun je gebruikmaken van het onderstaande script dat je opneemt in de <head>. Op die manier worden de plaatjes al geladen voordat het script wordt geactiveerd, waardoor foutmeldingen achterwege blijven (dit wordt preloaden genoemd).

<script type="text/javascript" language="JavaScript">
<!--
var iversion = -1;
var roll=false;

function version() {
    if (iversion != -1) return roll;

        if (navigator.appName.indexOf("Netscape") != -1) { // Netscape
                if (navigator.userAgent.indexOf("Mozilla/") != -1)
                        iversion = parseFloat(navigator.appVersion)
                else
                        iversion = 1;
                roll = (iversion>=3);
        } else {  // Not netscape.
                if (navigator.appName.indexOf("Internet Explorer") != -1) {
                        if (navigator.userAgent.indexOf("Mozilla/") != -1) 
                                iversion = parseFloat(navigator.appVersion)
                        else
                                iversion = 1;
                } else {
                        iversion = 1;
                }
                roll = (iversion>3);
        }
        return roll;
}

if (version()) {
            but1n        = new Image(121,81);
            but1o        = new Image(121,81);
            but1n.src    = "img/roll/jud_botticelli_zw.jpg";
            but1o.src    = "img/roll/jud_botticelli.jpg";	
}

function chimg(pic,name) {
                if (roll) {
                        pic.src = name.src;
                } 
}
//-->
</script>

In de <img> roep je het nummer aan van het plaatje:

<img src="img/roll/jud_botticelli_zw.jpg"
 width=121 height=81 alt="Judith"
 border=0 name="but1">

Je hebt een link nodig, want anders doet de muis niks. Ook hier het nummer van het plaatje:

<a href="http://huizen.dds.nl/~bloemj"
 onMouseover="if (roll) chimg(but1,but1o); return true;"
 onMouseout="if (roll) chimg(but1,but1n); return true;">
 <img src="img/roll/jud_botticelli_zw.jpg" width=121
 height=81 alt="Judith" border=0 name="but1"></A>