Plaatje laten veranderen als er op wordt geklikt

Op deze plaats wordt getoond hoe je het voor elkaar krijgt om een plaatje te vervangen door een ander plaatje door er op te klikken met de muis. Ook wordt hier de mogelijkheid gedemonstreerd om een zogenaamd "side-effect" te programmeren.
Hieronder zie je een plaatje van een vrolijke baby en daarnaast een plaatje van een man die zich verveelt. Als je op de baby klikt gaat die bewegen. De man wordt er heel blij van. Als je nog een keer op de baby klikt stopt die met bewegen en gaat de man zich weer zitten vervelen.
De randen rond de figuurtjes zijn gemaakt met een <table>.

Klik op mij!

De code staat aan het einde van deze bladzijde. Je kunt hem ook downloaden (inclusief de plaatjes).

Je ziet ook wel eens dat plaatjes veranderen als je er overheen beweegt met de muis. Hoe dat moet staat beschreven in het item Plaatje laten veranderen als de muis er over gaat.

• Er worden twee afzonderlijke bestanden gebruikt voor de baby: baby1.gif en baby2.gif.
  Baby2.gif is een "animated"-gif. Dit is niet meer dan een serie plaatjes achter elkaar die steeds als een film worden afgedraaid. Baby1.gif is een "gewoon" plaatje.
• Er worden twee afzonderlijke bestanden gebruikt voor de man: verveeld.gif en verblijd.gif. Beide plaatjes zijn animated-gif bestanden.
• De plaatjes baby1.gif en baby2.gif zijn beide even groot: elk 100 x 100 beeldpunten.
  De twee plaatjes van de man zijn dat niet!. Zorg dus dan je voldoende ruimte om het grootste plaatje maakt, bijvoorbeeld met een div of table-cell, waarvan je de afmetingen groter maakt dan het grootste plaatje.
• Het bijzondere van deze aanpak is dat er geen gebruik wordt gemaakt van (object-)variabelen om de plaatjes in op te slaan. In plaats daarvan wordt de eigenschap images.src van het object document veranderd.
   
  • Elk venster in de browser is een object, met de naam document.
  • Elk document heeft een lijst met plaatjes: de eigenschap images. Deze lijst begint met nummer 0. Daarna volgt 1, dan 2, enzovoort. In DEZE HTML-code is de baby het eerste plaatje. Die heeft dus nummer 0. De man is het tweede plaatje, dat is dus nummer 1. Het Java-Script dat hier wordt besproken houdt daar rekening mee.
    De download-knop heeft nummer 2, de terug-knop is nummer 3.
  • Elke eigenschap image heeft zelf weer een eigenschap src, waarin de bestandsnaam van het plaatje is vastgelegd.
   
• De functie onMuisClick() werkt als volgt:
   
  • Bij elke aanroep wordt teller met 1 verhoogd (teller += 1); teller begint op 1.
  • Als teller de waarde 3 heeft gekregen wordt teller teruggezet op 1; teller kan dus alleen de waarden 1 en 2 aannemen.
  • Als teller gelijk is aan 1 wordt baby1.gif in het eerste plaatje gezet (staat in document.images[0].src), en wordt het tweede plaatje verveeld.gif (staat in document.images[1].src).
  • Als teller niet gelijk is aan 1 (dus 2) wordt baby2.gif in het eerste plaatje gezet en wordt het tweede plaatje verblijd.gif.
    Het veranderen van verveeld.gif in verblijd.gif is het hierboven genoemde side-effect. Het ene plaatje verandert in het andere terwijl je ergens anders een actie uitvoert.
  • JavaScript is een string-geöriënteerde taal. Dat betekent dat er alleen lettertekens (karakters) in het geheugen worden op geslagen. Getallen (sec) bestaan alleen als die karakters echt als zodanig zijn aangemerkt. Er kan -beperkt- met cijfers worden gerekend. Je kunt cijfers ook gebruiken in strings. Dit wordt hier gebruikt bij het samenstellen van de naam van het baby-plaatje:
      document.images[0].src = "baby" + teller + ".gif";
   
• Op de plaats waar het plaatje van de baby moet komen wordt de tag <IMG> neergezet. In die tag staat het plaatje genoemd waar mee moet worden begonnen: src="baby1.gif".
  Hetzelfde geldt voor het plaatje van de man. Er wordt begonnen met verveeld.gif.
• Het plaatje van de baby is "klikbaar" gemaakt, op dezelfde manier als je een link maakt. Er staat:
    <a href="#" onClick="onMuisClick()"><(plaatje van de baby)></a>
  Door te refereren aan "#" wordt de pagina niet ververst, maar wordt wel de opdracht "onClick=...." uitgevoerd. Hier wordt dus de JavaScript-function onMuisClick() aangeroepen.

Gebruik:

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

De code ziet er als volgt uit:
 
(Zet dit JavaScript bij voorkeur in de <HEAD>)

<script>
// teller houdt zijn waarde nadat de function onMuisClick() is uitgevoerd.
// Daarom staat teller buiten de function
var teller = 1;
 
// Plaatjes verwisselen, met side-effect.
// Mag vrij worden gebruikt
function onMuisClick()
{
  teller += 1;
  if (teller == 3)
  {
    teller = 1;
  }
  document.images[0].src = "baby" + teller + ".gif";
  if (teller == 1) {
    document.images[1].src = "verveeld.gif";
  } else {
    document.images[1].src = "verblijd.gif";
  }
}

</script>

(Zet deze code op de plaats in de <BODY> waar het plaatje van de baby zich moet bevinden)

<a href="#" onClick="onMuisClick()"><img src="baby1.gif" alt="Klik hier!" width="100" height="100" border="0"></a> &nbsp;<br>Klik op mij!

(Zet deze code op de plaats in de <BODY> waar het plaatje van de man zich moet bevinden)

<img src="verveeld.gif" border="0" Alt="Jantje huilt en Jantje lacht">

Downloaden:
 
Druk op de knop:  File: voorb004.zip, 255 37 bytes.