Plaatje dat de muis volgt III: Kerstman in rendierslee
De bedoeling van deze bladzijde is zonder uitleg wel duidelijk. Er wordt hier een vrij complex stukje (bestaand) JavaScript gebruikt om deze kerstman met zijn rendieren te laten bewegen. Hier staat beschreven hoe je dit kunt gebruiken voor je eigen doeleinden.
Om het effect te starten moet je de muis bewegen. De kerstman en zijn rendierslee verschijnen niet uit zichzelf.
Bij een aanraakscherm moet je op het scherm tikken. De kerstman en zijn rendierslee bewegen zich naar de plaats waar hebt getikt, daarna blijven ze staan. De kerstman en zijn rendierslee verschijnen niet uit zichzelf
De code staat onderaan deze bladzijde. Je kunt hem ook downloaden, inclusief de plaatjes.
- De code bestaat uit drie delen:
- Een file kerstman.js, deze kan worden aangepast voor eigen doeleinden.
- Een stukje JavaScript in de <HEAD>.
- De opgave van de rij met plaatjes en de koppeling aan het JavaScript.
Het tweede item blijft altijd ongewijzigd. - De code van de rekenfuncties in de file kerstman.js wordt hier verder niet besproken. De commentaren
in de file spreken voor zich.
Voor het invoegen van deze code wordt verwezen naar het artikel over het Hergebruik van JavaScript, elders op deze site.
- De plaatjes worden op het scherm gezet met behulp van <img>-tags. Elk plaatje heeft een eigen
tag. Aan elke <IMG>-tag afzonderlijk wordt een style gekoppeld met behulp van een <DIV>-tag.
Elke style heeft een eigen naam (ID) waarvan de naam moet luiden: span gevolgd door een nummer.
Je begint te tellen bij nul. De rij met namen is dus: span0, span1, span2, enz.
Bij de style-definitie in de HTML wordt opgegeven: "visibility:hidden". Dit wordt door het JavaScript naderhand veranderd, zodat de plaatjes zichtbaar worden op het scherm. - Bij elk plaatje wordt de afmeting opgegeven. Dit is voor de functie van dit script niet noodzakelijk, tenzij de plaatjes niet allemaal even groot zijn. In dit voorbeeld zijn alle plaatjes 32x32 pixels.
- De "mooie" aansluiting van de zes rendieren, de teugels en de slee is bereikt door plaatjes te
kiezen die goed op elkaar aansluiten.
- De parameters die in het JavaScript kerstman.js kunnen worden gewijzigd zijn:
Naam Betekenis numberofimages Aantal achtereenvolgende plaatjes. In dit voorbeeld betekent dat, dat de styles span0 tot en met span7 in de HTML-file moeten zijn opgegeven.
Als je numberofimages te klein kiest worden niet alle plaatjes weergegeven. Als je numberofimages te groot kiest werkt het JavaScript niet.
In dit voorbeeld: numberofimages = 8.spacebetweenimgs Dit is de breedte van de plaatjes, zoals je die hebt opgegeven in de HTML. Als je spacebetweenimgs te groot kiest, onstaat er ruimte tussen de afzonderlijke plaatjes. Als je spacebetweenimgs te klein kiest, gaan de plaatjes elkaar overlappen. Natuurlijk kun je hier goed gebruik van maken voor het bereiken van speciale effecten.
In dit voorbeeld: spacebetweenimgs = 32.stepx Hiermee geef je aan (in pixels) hoever het eerste plaatje van de rij, in horizontale richting rechts, verwijderd moet zijn van de muis-cursor. Maak de waarde niet te groot, omdat anders de rij plaatjes van het scherm verdwijnt. Het is mogelijk negatieve getallen te gebruiken. In dat geval begint de rij plaatjes links van de cursor.
In dit voorbeeld: stepx = 8.stepy Hiermee geef je aan (in pixels) hoever het eerste plaatje van de rij, in verticale richting naar beneden, verwijderd moet zijn van de muis-cursor. Maak de waarde niet te groot, omdat anders de rij plaatjes van het scherm verdwijnt. Het is mogelijk negatieve getallen te gebruiken. In dat geval begint de rij plaatjes boven de cursor.
In dit voorbeeld: stepy = 10.speed Hiermee kun je de bewegingssnelheid veranderen. Er geldt: een groter getal is een lagere snelheid.
In dit voorbeeld: speed = 70. - Het script start automatisch als het hele document in de browser is geladen. Dat gebeurt met behulp van de opdracht window.onload
= initiatetracker; De beweging van de muis wordt gevolgd door het omleiden van het event mousemove naar de function
trapMouse(e). Bij elke beweging van de muis wordt nu de positie van de cursor aan het JavaScript overgedragen, waarna
plaats van de plaatjes op het scherm opnieuw wordt bepaald en aangepast.
Het scrollen van het document wordt gevolgd door het omleiden van het event scroll naar de function trapScroll(e). Elke verticale scrollbeweging wordt aan het JavaScript overgedragen, waarna de positie van de plaatjes in het document wordt bijgewerkt.
Gebruik:
- De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.
De code ziet er als volgt uit:
(Zet dit JavaScriptje in de <HEAD>)
<script" src="kerstman.js"></script>
(Zet deze code bij voorkeur direct onder de <BODY>-tag)
<!-- Add or delete more ID's, depending on how many images you're using -->
<!-- Make sure that all images are of the same size!! -->
<!-- Plaatjes voor de rendieren (0 t.m.5), de teugels (6) en de kerstman (7) -->
<div id="span0" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32"></div>
<div id="span1" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32"></div>
<div id="span2" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32"></div>
<div id="span3" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32"></div>
<div id="span4" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32"></div>
<div id="span5" style="position:absolute;visibility:hidden;">
<img src="rendier.gif" width="32" height="32"></div>
<div id="span6" style="position:absolute;visibility:hidden;">
<img src="teugel.gif" width="32" height="32"></div>
<div id="span7" style="position:absolute;visibility:hidden;">
<img src="kerstman.gif" width="32" height="32"></div>
Downloaden:
Druk op de knop:
File: voorb073.zip, 2973 bytes.
Opmerking:
Ik vind de kerstman een maar slap surrogaat voor Sinterklaas. Mocht je hem en zijn rendieren, net als ik, het liefste uit
de lucht willen schieten (als je ze ziet vliegen), dan kun je HIER vast oefenen...
