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.

Gebruik:

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>)

<style>
.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 vooraan in de <BODY>, dus net achter de <BODY>-tag).
<div id="theClock" style="position:absolute; top:0px; left:0px; display:block"></div>
(Zet dit helemaal achteraan in de <BODY>, dus net vóór de </BODY>-tag).
<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: Download deze code  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.

 
terug

html-041; Laatste wijziging: 21 mei 2022