Ben's Hobbyhoekje -- Plaatje dat de muis volgt IV: Oogjes die naar de muis kijken

Plaatje dat de muis volgt IV: Oogjes die naar de muis kijken

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 bijzondere daarbij is dat niet alleen het plaatje beweegt, maar dat de pupillen van de ogen ook nog bewegen.
N.B.: Dit werkt niet met een aanraakscherm.
Hier staat beschreven hoe je dit kunt gebruiken voor je eigen website.

Het idee om twee ogen steeds naar de muis te laten kijken heb ik voor het eerst gezien in X-Windows, de grafische interface die wordt gebruikt door veel versies van het UNIX operating system. Er zijn versies bekend voor Windows 7 en 8. Er bestaan ook apps voor tablets en smartphones die op Windows draaien.
De oorspronkelijke versie van dit script is gemaakt door Kurt Grigg. De hier gebruikte versie is door mij herschreven voor gebruik in een moderne website.
Je kunt deze web-versie met de bijbehorende plaatjes vanaf deze site downloaden, zie onderaan deze pagina.

De code staat in de file x-eyes.js. Deze file behoeft niet te worden veranderd.
De werking van het script is -zonder in details te treden- als volgt:

Eerst worden de plaatjes (ogen en pupillen) in een Image-object gezet.
Vervolgens worden de plaatjes in <div>-tags op het scherm gezet.
Daarna worden de beweging van de muis en het scrollen van de pagina aan het JavaScript gekoppeld. Hiervoor worden de functies trapMouse() en trapScroll() gebruikt, die op hun beurt weer reageren op de events mousemove en scroll via addEventListener.
De ogen volgen de muis door de aanroep van de function move(). Deze function wordt aangeroepen zodra de pagina is geladen en roept daarna zichzelf elke 0,01 sec. aan. Dat gebeurt met behulp van setTimeout(); de tijdklok die aan setTimeout() is gekoppeld heet timer.
Bij het verlaten van de paginma wordt de timer gestopt mij clearTimeout().
De function makefollow() wordt ook steeds door move() aangeroepen. makefollow() haalt gegevens op van de bewegende muis en het scrollende pagina.
makefollow() berekent de benodigde verplaatsingen van het plaatje (ogen èn pupillen) en werkt hun positie binnen het document bij. Zo wordt de beweging van het plaatje zichtbaar.

Gebruik:

De code staat in de <BODY>.

De code ziet er als volgt uit:

(Zet dit in de <BODY>, bij voorkeur direct na de BODY-tag. De volgorde is belangrijk).

<div id="eyeball" style="position:absolute; top:100px; left:100px;
width:69px; height:34px"> <img src="eye.gif" width="69" height="34">
</div>
<div id="pupil1" style="position:absolute; top:0; left:0; width:13px; height:13px">
<img src="pupils.gif" width="13" height="13">
</div>
<div id="pupil2" style="position:absolute; top:0; left:0; width:13px; height:13px">
<img src="pupils.gif" width="13" height="13">
</div>

<script src="x-eyes.js"></script>

Downloaden:

Druk op de knop: File: voorb089.zip, 2498 bytes.

Opmerking:

Ook hier geldt: Wees voorzichtig met de toepassing. Te veel bewegende objecten maken een bladzijde onrustig en moeilijk te lezen.

Als je een enkel plaatje met de muis wilt laten meebewegen, zonder de oogjes, dan kun je het beste de code gebruiken uit het item "Plaatje dat de muis volgt".