Lo script che presentiamo è un classico di ogni periodo natalizio: la neve. La caratteristica principale sta nel fatto che sarà possibile utilizzare, per i fiocchi di neve, sia immagini che caratteri testuali. In questo modo potremo valutare, in base al peso originale della pagina, quale delle due soluzioni adottare per non appesantire troppo il sito.
Importante notare come il codice sia perfettamente compatibile con i tre maggiori browser in circolazione: Explorer 5.x, Netscape 6.x e Navigator 4.x.
L'esempio si compone di 3 file:
- esempio.htm
- fiocco.gif
- snow.js
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 impostare dato che non si richiede nessuna personalizzazione sul file javascript esterno. In allegato è anche presente un'immagine di un fiocco ma siete comunque liberi di cambiarla a piacere.
Una volta che avrete deciso quale gif utilizzare, inserite questo codice tra i tag <head> della pagina:
<script language="javascript" SRC="snow.js"></script>
<script type="text/javascript" language="javascript">
function snow()
{
Falling(5,"<img src="fiocco.gif" width="25" height="25"/>", 60);
}
</script>
Successivamente, nel tag <body>, andrà impostato il gestore di eventi onLoad che richiama la funzione "snow()":
onLoad="snow()"
Il nostro body, quindi, sarà probabilmente così strutturato:
<body BGCOLOR="#ffffff" onLoad="snow()">
Vediamo cosa personalizzare:
<script language="javascript" src="snow.js"></script>
è la stringa che richiama il file javascript esterno. Se necessario, personalizzare il percorso che porta al file.
Falling(5,"<img src="fiocco.gif" width="25" height="25">", 60);
è la stringa che ci permette di inserire i fiocchi di neve.
- il primo valore (5) indica il numero di fiocchi da far scendere
- la riga "<img src=...>" indica il percorso esatto dell'immagine che rappresenta il fiocco
- l'ultimo valore indica la durata (in secondi) dell'effetto. Superato questo limite la nevicata si interromperà
Se pensate che le immagini appesantiscano eccessivamente la vostra pagina potete sostituire la gif con un carattere "*" (asterisco), sicuramente più leggere in termini di peso.
La stringa per utilizzare un carattere di testo è la seguente:
Falling(30,"<font size='3' face='verdanà color='#ffffff'>*</font>", 60);
Anche in questo caso rimangono invariate le proprietà del primo e dell'ultimo valore.
Caratteristica ancora più interessante sta nella possibilità di utilizzare fiocchi-immagine e fiocchi-testo simultaneamente.
Provate ad inserire queste righe al posto di quelle viste in precedenza:
<script type="text/javascript" language="javascript">
function snow()
{
falling(5,"<img src="fiocco.gif" width="25" height="25"/>", 60);
falling(30,"<font size='3' face='verdanà
color='#ffffff'>*</font>", 60);
}
</script>
Altre modifiche non sono necessarie.
