Plaatje dat de muis volgt II: Analoge klok
Dit werkt niet op een aanraakscherm
Dit effect is specifiek voor gebruik in combinatie met een muis of touchpad. Het is helaas (nog?) niet mogelijk om de aanwezigheid
van een muis of touchpad te detecteren. Daarom wordt het effect altijd uitgeschakeld als er een aanraakscherm wordt gevonden.
De combinatie van aanraakscherm en muis is mogelijk, bijvoorbeeld bij een laptop met aanraakscherm. Gebruikers van dergelijke
apparaten kunnen het effect niet zien, ondanks de aanwezige muis of touchpad.
Als het er ooit nog van komt dat de mogelijkheid om een muis te detecteren m.b.v. JavaScript, wordt
dat hier ook ingebouwd.
De bedoeling van deze bladzijde is zonder uitleg wel duidelijk. Er wordt hier een vrij complex stukje JavaScript gebruikt om een klok de bewegingen van de muis-aanwijzer te laten volgen. 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.
- De werking van het script is -zonder in details te treden- als volgt:
- Het font "Arial", size 16 px, wordt gebruikt om de cijfers van de klok op het scherm te tonen.
- Het font "Arial", size 10 px, wordt gebruikt voor de wijzers van de klok.
- De kleine wijzer wordt opgebouwd uit een rijtje van drie punten, waarvan de eerste in het middelpunt van de cirkel ligt. De grote wijzer bestaat uit vier punten, voor de secondewijzer worden vijf punten gebruikt.
- Van elke wijzer wordt om de 0.02 seconden de stand uitgerekend, aan de hand van informatie van de systeemklok van de PC.
- Vervolgens wordt de plaats van elke punt bepaald. Hierbij wordt uitgegaan van het middelpunt van de klok, dat wordt genomen in de punt (de "hot-spot") van de muis-pijl.
- De klok wordt punt voor punt opgebouwd. Hierdoor, en omdat de plaats van de klok wordt bepaald door de plaats van de muis, wordt de klok als een soort spiraal achter de muis aangesleept.
- Een aantal parameters kan worden ingesteld, zie hieronder.
- Het script heeft de mogelijkheid om de klok aan of uit te zetten. Gebruik daarvoor onderstaande button:
Gebruik:
- De code staat gedeeltelijk in de de <HEAD> en gedeeltelijk on de <BODY>.
- Wijzigingen kunnen worden aangebracht in de file anaclock.js, zoals hieronder is aangegeven.
- Hieronder staan de nu gebruikte instellingen vermeld.
fCol='0000ff'; RGB-code voor de kleur van de Cijfers. mCol='000000'; RGB-code voor de kleur van de Grote (Minuten-) wijzer. hCol='ff0000'; RGB-code voor de kleur van de Kleine (Uren) wijzer. sCol='7788ff'; RGB-code voor de kleur van de Seconden wijzer.
kgy1=5; Plaats van de klok onder de muis-pijl (pixels). kgx1=80; Plaats van de klok rechts van de muis-pijl (pixels). kgv1=0.6; Responstijd: tijd tussen beweging van de muis en reactie van de klok (seconden). kgv2=20; Bewegingssnelheid: tijd tussen twee opeenvolgende rekenstappen (milliseconden).
De code ziet er als volgt uit:
(Zet dit in de <HEAD>)
<style>(Zet dit helemaal vooraan in de <BODY>, dus net achter de <BODY>-tag).
.css1 {
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2 {
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial;
font-size:10px;
text-align:center;
}
</style>
(Zet dit helemaal achteraan in de <BODY>, dus net vóór de </BODY>-tag).<div id="theClock" style="position:absolute; top:0px; left:0px; display:block"></div>
<script src="anaclock.js"></script>(Zet dit in de <BODY>, op de plaats waar je de drukknop wilt hebben).
<!-- On/Off button. -->
<form name="con1">
<input type="button" name="con2" value="Klok UIT"
onClick="this.blur(); javascript:onoff()">
</form>
Downloaden:
Druk op de knop:
File: voorb041.zip, 2445 bytes.
Opmerking:
Zie het item "Kleurcodes voor tekst, links en achtergrond" voor
een beschrijving van de RBG-codes om de kleuren in te stellen.
Door de variabelen kgxl en kgyl gelijk te nemen aan nul komt het middelpunt van de klok steeds op de punt van
de pijl te staan.
Het item: "Plaatje dat de muis volgt IIa: Analoge klok met datumaanduiding",
beschrijft een uitbreiding van dit script. Daarbij wordt ook de huidige datum gegeven.
Om te bepalen of er een aanraakscherm is of niet wordt de methode gebruikt die wordt beschreven in het item
Aanraakscherm detecteren.
Tenslotte geldt ook hier: Wees voorzichtig met de toepassing. Veel tekst op een pagina waar je dit toepast maakt het lastig
om die tekst te lezen! Zorg voor voldoende kleur-contrast zodat de klok goed zichtbaar is.
