Exploderende hyperlinks
Hyperlinks verschijnen gewoonlijk in een andere kleur, een ander font en/of onderstreept op je web-pagina. Als je met de
muis over een hyperlink gaat of deze aanklikt verandert deze van kleur. Een hyperlink die je al eens hebt aangeklikt heeft
weer een andere kleur.
Hoewel je deze kleuren, fonts en opmaak helemaal kunt instellen zoals je ze zelf wilt hebben, is en blijft een hyperlink een
statisch ding.
Op deze plaats wordt een JavaScript beschreven dat beweging aan een hyperlink toevoegt.
Het script is afkomstig van een site die niet meer bestaat: www.24fun.com. Het is heel geschikt voor hyperlinks naar spectaculaire
zaken, zoals de aankondiging van een feest, een nieuw product, enz.
N.B.: Dit werkt niet goed als er alleen maar een aanraakscherm is. Een muis is echt nodig!
Voorbeeld: Beweeg eens met de muis over onderstaande links:
Dit is een voorbeeld!
De links zelf doen niets.
| Een gewone link |  |
Op deze bladzijde staat beschreven hoe je dat aanpakt. Je kunt de code ook downloaden, inclusief de plaatjes.
- Er worden twee items besproken:
- Inbouwen in je eigen website.
- Mogelijkheden om de werking van het script te beïnvloeden.
- De code staat in de file aexplode.js. Deze hoef je niet te veranderen om hem te kunnen gebruiken. Plaats de verwijzing naar deze code in de HEAD.
- In de <a>-tag zet je een event-handler:
Op de plaats van 'tekst' zet je de tekst neer die je in de explosie wilt gebruiken.onMouseOver="startexplosion('tekst')"
- De toepassing van deze code beperkt zich niet tot
alleen hyperlinks. Het effect wordt namelijk gestart met onMouseOver. Je kunt het dus in elke
tag die onMouseOver ondersteunt gebruiken.
Beweeg met je muis over deze tekst voor een voorbeeld. - In plaats van onMouseOver kun je ook onClick gebruiken. Als je onClick gebruikt in een <a>-tag wordt het effect onvoorspelbaar.
- Het is
zelfs mogelijk om dit effect met een plaatje te maken. Klik met de muis op deze tekst voor een voorbeeld.
Gebruik enkele aanhalingstekens in combinatie met het escape-karakter \ in de img-tag, anders maakt de browser er een rommeltje van.
- Natuurlijk is het veel leuker om ook nog wat met de instellingen te spelen, zodat het effect er wat
anders uit gaat zien. Het JavaScript in de file aexplode.js heeft daarvoor vijf variabelen, zie
onderstande tabel:
Naam Betekenis sparklenumber Aantal wegspringende delen ("vonken"). Dit is een getal, groter dan nul. Er is geen maximum aan het aantal vonken. Hier: 20.sparklefont Array, met daarin de namen van de fonts die worden gebruikt om de tekst in weer te geven. Je kunt er net zoveel gebruiken als je wilt.
Hier: ("Arial","Times","Comic Sans MS").
Kies hier voor "Standaard" Windows-fonts zodat je vrij zeker kunt zijn dat je bezoeker het effect te zien krijgt zoals jij wilt.
Als je "exotische" fonts toepast is de kans groot dat je bezoeker die niet heeft. Windows zal dan zelf iets anders kiezen. De kans bestaat dat het effect er niet mooi meer uit ziet.sparklesize Array, waarin de grootte van de vonken, in pixels, wordt vastgelegd.
Hier: (5,10,15,20).
Dit betekent dat er vonken van 5, 10, 15 en 20 pixels hoog worden gemaakt.sparklecolor Array, waarin de kleur van de vonken wordt vastgelegd. Dit zijn hexadecimale RGB-codes. Je kunt er net zoveel gebruiken als je wilt.
Hier: ("#FF0000","#000066","#444400","#006600")
Het gebruik van hexadecimale codes om kleuren mee in te stellen wordt besproken in het item "Kleurcodes voor tekst, links en achtergrond"..speed Bewegingssnelheid van de vonken. Eigenlijk wordt hiermee de wachttijd tussen twee opeenvolgende berekeningen ingesteld. Dat betekent dat een hogere waarde een lagere snelheid geeft.
Hier: 20. Dat betekent dat er 0,02 sec tussen twee berekeningen zit. - Algemeen geldt: Hoe meer vonken, fonts, afmeting en kleuren, hoe meer er moet worden gerekend. Als je veel vonken, fonts, etc., instelt gaat het effect langzamer lopen.
Gebruik:
- De code staat in de <HEAD>. Code in de <BODY> moet waar nodig worden aangepast.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zet dit in de <BODY> -- Merk op dat deze links geen actie uitvoeren!).<script src="aexplode.js"></script>
(** Voorbeeld van een gewone hyperlink)
(** Voorbeeld van een hyperlink met plaatje)<a href="#" onMouseOver="startexplosion('Tekst')">Een gewone link</a>
(** Voorbeeld van een Button)<a href="#" onMouseOver="startexplosion('Plaatje')"><img src="fish6a.gif" alt="" width="80" height="26" border="0"></a>
<button name="knop" id="knop" value="Button" type="button"
onMouseOver="startexplosion('Button')">Button</button>
Downloaden:
Druk op de knop:
File: voorb137.zip, 3778 bytes.
Opmerking:
Een vergelijkbaar idee vind je in het item Exploderende muisklik met jQuery
Ook hier geldt: wees voorzichtig met de toepassing. Te veel beweging maakt een pagina onrustig en zal er toe leiden
dat je bezoekers vertrekken.
