Knop die wegspringt als je er met de muis over gaat
Als je met de muis over de onderstaande button gaat, springt deze weg. Het is dus onmogelijk om de knop aan te klikken.
Ook als je op een willekeurige plaats in het document klikt of tikt, springt de knop weg
.
Deze knop is een uitstekende manier om je bezoekers in de maling te nemen.
Hier staat beschreven hoe je dat aanpakt. Je kunt de code ook downloaden voor je eigen gebruik.
- Het script staat in de file jumpknop.js. Dit kan voor gebruik worden aangepast.
- Dit script is bewerking van een script dat is gemaakt door Craig Casey. De versie die hier wordt beschreven
is wat gemakkelijker in gebruik. De oorspronkelijke versie is afkomstig van JavaScriptKit, maar is daar verdwenen.
- Het uiterlijk van de knop kan worden veranderd. Het script heeft daarvoor drie variabelen:
btnbgcol Achtergrondkleur van de knop. Hier: coral.fntcol Tekstkleur van de knop. Hier: navy.message Tekst op de knop. Hier: Klik me als je kunt. - Als je op een willekeurige plaats op de bladzijde klikt, verplaatst de knop zich. Dit kun je uitschakelen door
de laatste regel van het script te verwijderen:
document.onclick = moveIt;
Je kunt er natuurlijk ook gewoon commentaar van maken.
Verdere wijzigingen aan het script zijn niet nodig.
- De werking van het script is, zonder in detail te treden, als volgt:
- Bij het openen van het script wordt de knop in de <div>-tag met het ID='button1' in de bladzijde gezet. De positie is relative.
- De eigenschappen van button1 worden in een variabele cross_el gezet.
- Als de pagina geheel is geladen wordt de function changeIt() aangeroepen. Dit gebeurt via de opdracht window.onload, aan het einde van het script.
- De function changeIt() zet de button op het scherm door de innerHTML van button1 te
wijzigen: De HTML-code voor de knop wordt er in gezet, in een <button>-tag.
De ingestelde tekstkleur, achtergrondkleur en knoptekst worden hier meegenomen. Tevens wordt de knop voorzien
van handlers voor onmouseOver en onmouseDown. Beide roepen de function moveIt() aan.
Merk op dat de knop verder helemaal niets doet. Er is dus geen actie aan gekoppeld voor bijvoorbeeld het openen van een andere web-pagina of wat dan ook. - De function moveIt() zorgt voor het verplaatsen van de knop, door de coördinaten top en left willekeurig te veranderen.
- De function moveIt() wordt ook aangeroepen als je ergens willekeurig in het document klikt. Dit kun je uitschakelen, zie boven.
- Natuurlijk kun ook een wat meer wervende tekst op de knop zetten zoals: "Klik hier voor de hoofdprijs"...
.
Gebruik:
- De code staat in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <BODY>, op de plaats waar je de knop wilt laten verschijnen; de volgorde is van belang).
<div id="button1" style="position:relative; z-index:10"></div>
<script src="jumpknop.js"></script>
Downloaden:
Druk op de knop:
File: voorb131.zip, 1047 bytes.
Opmerking:
Je kunt dit soort grappen ook uithalen met andere HTML-elementen, zoals een plaatje of een stuk tekst.
Zie daarvoor het item "Plaatje of tekst die wegspringt als
je er met de muis over gaat".
