Tekst en plaatjes in willekeurige volgorde tonen


Wanneer je een stuk tekst, een plaatje of een ander soort content wilt tonen in willekeurige volgorde, en iedere keer
iets anders wilt laten zien als een bezoeker op je site komt, kun je gebruik maken van een handig stukje javascript.
We maken hierbij gebruik van javascript’s Math.round() en Math.random(), deze selecteren en laten een willekeurig stuk
content zien van een serie.

Eerst zul je de lijst moeten maken van datgene dat je wilt laten zien. Dit kun je in de head van je document plaatsen,
handiger is om een aparte pagina aan te maken met de naam ‘random.js’. Dit bestand kun je dan oproepen door de volgende
code in je header te plaatsen:

Nu de invulling van random.js. Dit ziet er als volgt uit:

randContent = new Array();
randContent[0] = “…item 0…”;
randContent[1] = “…item 1…”;
randContent[2] = “…item 2…”;
randContent[3] = “…item 3…”;
randContent[4] = “…item 4…”;
randContent[5] = “…item 5…”;
var numb = randContent.length-1;
var mathRandom = Math.random();
var mathRound = Math.round((mathRandom*numb));
var randDisplay = randContent[mathRound];

Merk wel even op dat Javascript arrays altijd bij nul beginnen te tellen, vergeet dat niet!
Daarnaast moet je als je html-code gebruikt in een script even ‘ gebruiken op de plek waar je ” normaal gebruikt en
daar een voor zetten. Dat geldt ook voor /, dat moet veranderen in /. Bijvoorbeeld
“<param name=’allowScriptAccess’ value=’sameDomain’ />” in een stukje script voor Flash.

Op de plek waar je nu daadwerkelijk je content wilt tonen moet je de volgende code plaatsen:

Op de plek van item 0 enzovoort kun je willekeurig wat kwijt, zoals uitspraken van bezoekers, plaatjes, topverkopen,
flash movies en zelfs advertenties. Op de voorbeeldpagina
laten we zien wat je er mee kunt doen. Moet je wel af en toe even op vernieuwen
klikken om het resultaat te kunnen zien.

html en css voor beginnersWil jij ook leren hoe je je eigen website kunt maken?

Wil jij tips en tricks om zo goed mogelijk zelf met alles aan de slag te kunnen?
Meld je hieronder aan voor de HTML-site nieuwsbrief en krijg elke week handige tips om een website te bouwen.
En je ontvangt meteen mijn GRATIS ebook HTML & CSS voor Beginners.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.