Schiet op de Kerstman en zijn rendierslee: Toelichting
Het spelletje werkt nagenoeg hetzelfde als de voorbeeld-bladzijde:
Plaatje dat de muis volgt III: Kerstman in rendierslee
De code in het JavaScript kerstman.js is ongewijzigd gebleven. Aan de code in de HTML-file is
de event-handler onClick toegevoegd aan de <img>-tags.
Met behulp van onClick wordt de JavaScript function HideImage(n) aangeroepen. Die zet de
visibility van de style waartoe het betreffende plaatje behoort op "hidden", dat
wil zeggen: als het plaatje zichtbaar is. Op een onzichtbaar plaatje kun je namelijk niet klikken.
De eerste twee rendieren zijn vervangen door een transparant plaatje, dat wel even groot is als de rendieren
zelf. Dit is gedaan om te voorkomen dat het spel "onspeelbaar" wordt.
Door deze aanpak is het niet nodig om kerstman.js te veranderen. De rendierslee staat nu ook verder
van de cursor af, waar door het spelletje wat gemakkelijker te winnen is.
De HTML-code ziet er nu als volgt uit:
<div id="span0" style="position:absolute;visibility:hidden;">
<img src="pixel-0.gif" width="32" height="32"></div>
<div id="span1" style="position:absolute;visibility:hidden;">
<img src="pixel-0.gif" width="32" height="32"></div>
<div id="span2" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32" onclick="hideimage(2);"></div>
<div id="span3" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32" onclick="hideimage(3);"></div>
<div id="span4" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32" onclick="hideimage(4);"></div>
<div id="span5" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32" onclick="hideimage(5);"></div>
<div id="span6" style="position:absolute;visibility:hidden;">
<img src="teugel.gif" width="32" height="32" onclick="hideimage(6);"></div>
<div id="span7" style="position:absolute;visibility:hidden;">
<img src="kerstman.gif" width="32" height="32" onclick="hideimage(7);"></div>
De function HideImage() maakt het aangeklikt plaatje onzichtbaar, en zet het in de statusbalk rechtsboven. Uiteraard moet kerstman.js in de <HEAD> van dezelfde HTML-file worden geopend.
Opmerking:
De gegevens uit het formulier worden overgebracht naar het nieuwe venster met behulp van een
techniek die is beschreven in het item "HTML met parameters".
De knop die van kleur verandert (met de plaatjes er in) is gemaakt met de techniek die is beschreven in het item
"Knop die van kleur verandert als je er met de muis overheen
gaat", samen met het item "Knop met tekst of
een plaatje".
