Ben's Hobbyhoekje -- Wisselend plaatje met wisselende link

Wisselend plaatje met wisselende link

Klik mij!
Klik op het plaatje.

Hierboven wordt een serie plaatjes getoond van voorwerpen die onmisbaar zijn op een modern kantoor.
Als je met de muis over een plaatje schuift verschijnt er een melding over dat plaatje in de statusbalk (mits die zichtbaar is). Als je er op klikt wordt het plaatje vergroot getoond op een aparte bladzijde.

De code staat onderaan deze bladzijde. Je kunt hem ook downloaden voor je eigen gebruik, inclusief de plaatjes.

Er worden twee items besproken:
1. Het automatisch laten wisselen van het plaatje.
2. De hyperlink die met het plaatje mee verandert.
Op deze bladzijde wordt nog een andere techniek gebruikt:
- De aanroep van andere pagina's door middel van een "query". Zie daarvoor het item HTML met parameters .
De werking van het script is als volgt:
Eerst wordt het aantal plaatjes vastgelegd in de variabele AantalPlaatjes. Hier is dat 4.
Vervolgens wordt de lijst Teksten gemaakt en gevuld met verklarende teksten bij de plaatjes.
Daarna wordt de lijst met plaatjes gemaakt en gevuld. Hier zijn .GIF-plaatjes gebruikt met de namen: plaatje0.gif, plaatje1.gif, plaatje2.gif en plaatje3.gif. Daarom is het mogelijk de lijst met plaatjes te maken in een for-loop.
Nu wordt er een variabele i gemaakt, die de waarde -1 krijgt. Deze variabele controleert het wisselen van de plaatjes en het kiezen van het juiste plaatje als je er op klikt.
de function Wisselen() verzorgt het verwisselen van het plaatje op het scherm. De variabele i wordt opgehoogd. Zo nodig wordt deze terug gezet op nul.
De naam van het nieuwe plaatje wordt uit de lijst Plaatjes gehaald op basis van de waarde van i. Het nieuwe plaatje wordt op de plaats van het vorige plaatje gezet.
De koppeling tussen het script en de <IMG>-tag verloopt via de naam "Kantoor". In het script staat: document.Images["Kantoor"].src = ......
In de <IMG>-tag staat het attribuut name="Kantoor".
Tenslotte wordt de function setTimeout gebruikt om Wisselen() zichzelf na 2 seconden te laten aanroepen, waarna het volgende plaatje verschijnt.
Als je op het plaatje klikt wordt via de event-handler onClick de function GeKlikt() aangeroepen. Op basis van i wordt een keuze gemaakt welke pagina er moet worden geladen. Hier is dat steeds de file html080a.htm. Wat die HTML-code moet gaan doen wordt meegegeven in een query.
Een andere methode is het gebruik van een switch, bijvoorbeeld:
function GeKlikt() {
switch i {
case 0: self.location="html080a.htm"; break;
case 1: self.location="html080b.htm"; break;
case 2: self.location="html080c.htm"; break;
case 3: self.location="html080d.htm"; break;
default:window.alert('Sorry...\n\nGevraagde pagina bestaat niet\nof is onvindbaar.');
}
Let hierbij op de aanwezigheid van break. Dit is nodig om de cases te scheiden.
Tenslotte wordt de functie Wisselen() gestart door: window.onload = Wisselen.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:

(Zet deze code in de <HEAD>)

<script>
/*
Wisselend plaatje; elk plaatje is een andere link;
(c) 2003 Ben Boukes. Mag vrij worden gebruikt mits dit commentaar niet wordt verwijderd
*/

var AantalPlaatjes = 4; // Aantal plaatjes de array Plaatjes

var Teksten = new Array(AantalPlaatjes); // Lijst met teksten
Teksten[0] = 'Koffiekopje. Onmisbaar om koffie te drinken.';
Teksten[1] = 'Klok. Onmisbaar als je op tijd naar huis wilt.';
Teksten[2] = 'Telraam. Onmisbaar als de stroom uitvalt.';
Teksten[3] = 'Diskettes. Tegenwoordig doe je dat met een externe harddisk.';

var Plaatjes = new Array(); // Lijst met Plaatjes
for (i = 0; i < AantalPlaatjes; i++) { // Vul de lijst met plaatjes
  Plaatjes[i] = new Image(); Plaatjes[i].src = "plaatje"+i+".gif"; }

var i = -1;
function Wisselen() {
  i++; if (i == AantalPlaatjes) i = 0; // Volgend plaatje
  document.images["Kantoor"].src = Plaatjes[i].src; // Nieuw plaatje tonen
  setTimeout('Wisselen()',2000); // Wachten tot volgend plaatje aan de beurt is
}

function GeKlikt() {
  if (i < AantalPlaatjes)
    self.location = "html080a.htm?iii="+i+"&fff=plaatje"+i+".gif&ttt="+Teksten[i];
  else
    window.alert('Sorry...\n\nGevraagde pagina bestaat niet\nof is onvindbaar.');
}

window.onload = Wisselen; // Start de bewegingsfunctie
</script>

(Zet deze code in de <BODY>, op de plaats waar het plaatje moet komen.)

<div align="center">
<img src="plaatje0.gif" border="2" width="144" height="97" alt="Klik mij!" name="Kantoor" onClick="GeKlikt()">
</div>

Downloaden:

Druk op de knop: File: voorb080.zip, 48 842 bytes.