Plaatje dat de muis volgt
De bedoeling van deze bladzijde is zonder uitleg wel duidelijk. Er wordt hier een vrij complex stukje JavaScript gebruikt om een plaatje de bewegingen van de muis-aanwijzer te laten volgen. Het is een beetje flauw om daarvoor een katje te nemen, daarom is hier een visje gekozen. Hier staat beschreven hoe je dit kunt aanpassen en gebruiken voor je eigen doeleinden.
De code staat onderaan deze bladzijde. Je kunt hem ook downloaden, inclusief het plaatje.
- Het script bestaat uit een JavaScript-bestand followme.js en stukje HTML dat bestaat uit een <div>-tag en een <img>-tag voor het plaatje.
- Het script vereist dat er een muis aanwezig is. Op alleen een aanraakscherm werkt het niet.
- Het JavaScript hoef je niet te veranderen om het te gebruiken.
- De werking van het script is -zonder in details te treden- als volgt:
- Als de pagina geladen is wordt de function setHandlers() gestart. Deze maakt een event-handler voor het bewegen van de muis. De function follow() vangt bij elke muisbeweging de coördinaten van de muis-pijl op het scherm af.
- Er wordt ook een event-handler gemaakt voor het opvangen van scrroll-bewegingen. De function trapScroll() vangt de scrollbewegingen op. Die worden gebruikt om het plaatje bij de muis te houden als de pagina wordt gescrolled.
- De function follow() roept de function moveeye() aan. Deze functie verandert eigenschappen top en left van de <div> met id="followme", waardoor het plaatje gaat bewegen.
- De function setHandlers eindigt met een aanroep van functie moveall(). Deze functie zorgt ervoor
dat het plaatje in kleine stapjes naar de muis toe beweegt zolang deze niet bewogen wordt, via aanroep van
moveeye().
- Bij het openen van de pagina wordt het plaatje op een vaste begin-positie op het scherm gezet. Dit gebeurt met behulp
van de style-attributen top en left. Op deze pagina wordt 100px resp. 200px gebruikt, maar dat kun je
naar eigen inzicht veranderen.
- Bij het openen van de pagina wordt de functie SetHandlers() éénmaal aangeroepen met behulp van:
window.onload = setHandlers.
Een andere methode om dit te doen is door in de <BODY>-tag op te nemen: onLoad="setHandlers()". Op het moment dat dit wordt geschreven wordt dat echter niet aangeraden. Dat houdt verband met de werking van de moderne browsers. - Bij het sluiten van de pagina wordt de functie clearEyes() éénmaal aangeroepen met behulp van:
window.onunload = clearEyes.
Een andere methode om dit te doen is door in de <BODY>-tag op te nemen: onUnload="clearEyes()". Ook daar geldt dat het geen aangeraden methode is.
Dit werkt niet op aanraakschermen, omdat daar geen muis-aanwijzer is. Op een apparaat met aanraakscherm zie je het plaatje even, daarna verdwijnt het in de linker boven hoek.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
(Zet dit in de <HEAD>).
(Zet dit in de <BODY>).<script src="followme.js"></script>
<div id="follower" style="position:absolute; top:100px; left:200px; width:68px; height:30px;">
<img src="fish7.gif" border="0">
</div>
Downloaden:
Druk op de knop:
File: voorb014.zip, 2729 bytes.
Opmerking:
De naam van de JavaScript-functions doet vermoeden dat dit te maken heeft met "Ogen die naar de muis kijken", zoals je die
kon (kunt?) aantreffen in de grafische interface X-Windows, die met UNIX wordt gebruikt. Het oorspronkelijke script gaat daar
inderdaad over. Dit script was er een vereenvoudigde en aangepaste versie van, maar is geheel herschreven.
Een script waarbij ogen naar de muis kijken wordt besproken in het item: "Plaatje
dat de muis volgt IV: Oogjes die naar de muis kijken".
Ook hier geldt: Wees voorzichtig met de toepassing. Een te groot plaatje dat steeds over de tekst heen
schuift maakt het lastig om de tekst te lezen!
