Plaatjes random vertonen


Wanneer je op een simpele manier je bezoekers bij ieder
bezoek steeds een ander plaatje wilt laten zien, in willekeurige volgorde kun je het beste gebruik
maken van een simpel javascriptje. Er zijn er op het internet heel veel te vinden, bijvoorbeeld
op http://www.leejoo.nl.

Plaatjes met bijna dezelfde naam

Het eerste wat je moet doen is een serie plaatjes maken, of zoeken en deze ongeveer dezelfde naam geven.
In de naam moet je in ieder geval een nummervolgorde hebben zitten. Noem het bijvoorbeeld
plaatje1.jpg, plaatje2.jpg en plaatje3.jpg enz. Zorg er ook voor dat ze allemaal van hetzelfde type zijn, in ons
voorbeeld .jpg.

De img tag

Ten tweede ga je bepalen hoe je image tags er uit zouden zien als ze direct in je code geplaatst zouden
worden. Dit wordt namelijk een deel van je javascript. Bijvoorbeeld: Je wilt van ieder plaatje dat het een
vast formaat heeft, dan wordt je img-tag <img src=”plaatje2.jpg” style=”height: 200px; width:150px;”>.

De JavaScript code

De volgende stap is om javascript in de ‘head’ van je webpagina te plaatsen, dus tussen <head> en
</head>. Dit ziet er als volgt uit:

<script type=”text/javascript”>
AantalWillekeurigePlaatjes = 5;
EersteStuk = ‘<img src=”plaatje’;
TweedeStuk = ‘.jpg” style=”height: 200px; width:150px;”>’;
function printImage() {
var r = Math.ceil(Math.random() *AantalWillekeurigePlaatjes);
document.write(EersteStuk + r + TweedeStuk);
}
</script>

Uitleg van de code

Op de regel ‘AantalWillekeurigePlaatjes’ geef je het aantal plaatjes wat je wilt weergeven. In ons
voorbeeld dus 5. Daarna moet je de img-tag in twee stukken verdelen. Het eerste stuk alles voor het nummer
van het plaatje en achter ‘TweedeStuk’ komt de rest van de tag. Daaronder zie je de functie die moet
worden uitgevoerd, waarna de twee stukken door deze functie weer worden samengevoegd.
‘Math.random’ zorgt ervoor dat dit willekeurig gebeurt.

Oproepen van de functie

Tenslotte moet ergens op je pagina het plaatje verschijnen, weer door javascript toe te voegen,
nu als volgt:

<script type=”text/javascript”><!–
printImage();
//–></script>

Deze code komt te staan op de plek waar je je plaatjes wilt hebben staan.
Succes ermee

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *