Zou je het niet leuk vinden als je elke keer dat je je pagina opent er een nieuwe afbeelding verschijnt? Dat zou je website een stuk levendiger maken, nietwaar? Je zou zelfs de header van je website kunnen laten wisselen, zodat je telkens een andere sfeer krijgt. Of laat in je zijbalk telkens een andere willekeurige foto zien om je bezoekers een bepaalde impressie te geven. Als je meerdere producten aanbiedt op je website, laat je telkens een ander product zien uit je assortiment.
En zo kun je waarschijnlijk nog wel meer toepassingen verzinnen. Je zorgt er zo voor dat je bezoekers telkens iets nieuws zien, en dat valt natuurlijk op! Het leuke is dat dit erg eenvoudig te realiseren is met een klein javascriptje.

Hoe werkt dat dan?

Plak tussen de < HEAD> en de < /HEAD> van je websitecode de volgende code:

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
theImages[0] = '/afbeeldingenmap/1.jpg'
theImages[1] = '/afbeeldingenmap/2.jpg'
theImages[2] = '/afbeeldingenmap/3.jpg'
theImages[3] = '/afbeeldingenmap/4.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
</script>

Vul in plaats van ‘/afbeeldingenmap' de map in waar je afbeeldingen staan. Heb je geen afbeeldingen, laat dit stukje dan weg en gebruik ‘/1.jpg'

Wil je meer afbeeldingen gebruiken dan kun je het lijstje aanvullen. Zorg ervoor dat je het getal achter ‘theImages' blijft opnummeren. De naam van de afbeelding maakt niet zoveel uit. In het voorbeeld heb ik deze ook genummerd.

Geef je afbeeldingen een plekje

Op de plaats waar je de afbeelding wilt hebben plaats je de volgende code:

 <SCRIPT
LANGUAGE="JavaScript">showImage();</script>

Tot slot nog een tip: zorg ervoor dat je afbeeldingen dezelfde grootte hebben of in ieder geval dezelfde verhoudingen. Dat zorgt voor eenheid en rust in je website.

Veel succes!