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
