X-windows oogjes
Windows, het operating system dat draait op de meeste PC's, heeft een ingebouwde grafische interface. Dat is een handig hulpmiddel voor het besturen van je PC. Er bestaan ook andere operating systems, zoals Unix. Ook voor Unix bestaat een (aparte) grafische interface, nl. X-Windows. Een van de leuke gimmicks die met X-Windows worden meegeleverd is X-Eyes, in de wandelgangen beter bekend als "de Oogjes". Dit programma toont een paar ogen op het scherm, die steeds naar de muis kijken.
Op deze plaats vind je een versie van X-Eyes die speciaal is geschreven voor gebruik met een internet-browser.
Deze versie is geheel geschreven in JavaScript. Je kunt hem dus in een website inbouwen. Het is gebaseerd op een
ander script dat ook op deze website staat:
Plaatje dat de muis volgt IV: Oogjes die naar de muis kijken.
Je kunt de hier gepresenteerde code downloaden voor je eigen gebruik, inclusief de plaatjes. Zie onderaan deze bladzijde.
- De file x-eyes2.js bevat het complete script.
- Bij het openen van deze pagina staan de oogjes in de hoek linksboven. Als je de oogjes ergens anders wilt zetten moet je de parameter LocationOnScreen veranderen in de file x-eyes2.js. Verder behoeft het script geen aanpassing.
- Mogelijke waarden voor LocationOnScreen zijn:
TopLeft TopCenter TopRight CenterLeft CenterCenter CenterRight BottomLeft BottomCenter BottomRight
Het script gebruikt 'TopLeft' als er een verkeerde waarde voor LocationOnScreen wordt gebruikt.
- Het script gebruikt twee plaatjes, namelijk de ogen zelf en de pupillen. De afmetingen van deze plaatjes zijn
"hard" geprogrammeerd. Het wordt niet aangeraden de plaatjes te vervangen door andere, tenzij je ze hier
gebruikte afmetingen geeft:
- ogen (file eye.gif): 69x34 pixels
- pupillen (file pupils.gif): 13x13 pixels
- Als je dit toepast op een bladzijde met frames (zoals hier) blijven de oogjes stilstaan als de muis-aanwijzer het frame verlaat.
- Als je pagina laat scrollen blijven de oogjes in beeld.
- De afstand tussen de oogjes en de bovenrand en de linkerrand is altijd 10 pixels. Dat is zo in het script geprogrammeerd.
- De oogjes kunnen niet onder de schuifbalk aan de onderkant en aan de rechterkant verdwijnen. Ze blijven altijd 10 pixels van de schuifbalk verwijderd. Dat is in het script zo geprogrammeerd.
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:fixed; top:0; left:0; width:69px;
height:34px">
<img src="eye.gif" width="69" height="34">
</div>
<div id="pupil1" style="position:fixed; top:0; left:0; width:13px;
height:13px">
<img src="pupils.gif" width="13" height="13">
</div>
<div id="pupil2" style="position:fixed; top:0; left:0; width:13px;
height:13px">
<img src="pupils.gif" width="13" height="13">
</div>
<script src="x-eyes2.js"></script>
Downloaden:
Druk op de knop:
File: voorb100.zip, 2661 bytes.
Opmerking:
Ook hier geldt: Wees voorzichtig met de toepassing. Te veel bewegende objecten maken een bladzijde onrustig en
moeilijk te lezen.
Als je de oogjes de muis wilt laten meebewegen, dan kun je de code gebruiken uit het item "Plaatje dat de muis volgt IV".
