Lo script che presentiamo permette di creare un effetto "terremoto" quando si passa con il mouse sopra un link. Un effetto sicuramente particolare, da usare con moderazione, ma che darà un tocco di originalità al nostro sito.
Nei mesi scorsi era stato già commentato e inviato uno script che avviava un effetto simile nel momento in cui un utente entrata nella pagina (è l'esempio numero 83 dell'archivio).
Il javascript odierno, invece, permette il movimento della pagina su un singolo link e con diversi tipi di azione: onMouseover, onClick, onMouseup.
Funziona sia con Explorer e sia con Netscape anche se con quest'ultimo la durata dell'effetto è più lunga rispetto al browser di casa Microsoft.
L'esempio si compone di 5 file:
- esempio.htm
- tremor.js
- 01.gif
- 02.gif
- 03.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Lo script è semplicissimo da applicare dato che l'effetto è gestito interamente da un file esterno che non richiede personalizzazione.
Pertanto inseriamo la stringa che richiama il javascript esterno tra i tag <head> del documento:
<script language="javascript" src="tremor.js"></script>
A questo punto inseriamo nel <body> i link a cui vogliamo associare l'evento:
<a href="http://www.html.it" target="_self" onMouseover="callJS('tremor(1)')"></a>
<a href="http://gifanimate.html.it" target="_self" onClick="callJS('tremor(5)');"></a>
<a href="http://font.html.it" target="_self" onMouseOver="callJS('tremor(3)');"></a>
Vediamo in che modo è possibile agire sul codice:
onMouseover="callJS('tremor(1)')"
onClick="callJS('tremor(5)');"
onMouseOver="callJS('tremor(3)');"
queste sono le stringhe da assegnare ai link che vogliamo far tremare. Gli eventi che possiamo applicare al javascript sono fondamentalmente 3:
onClick
onMouseover
onMouseup
Il numero tra parentesi indica invece le volte che l'effetto verrà ripetuto prima che venga lanciato il link corrispondente.
Il javascript può essere applicato ad un numero infinito di link e non necessita di altre personalizzazioni.
