Lo script che presentiamo permette di rendere "intermittenti" i semplici bottoni dei form. Al posto del classico grigio a cui siamo abituati, vedremo una serie di colori che cambieranno ad intervalli di tempo prestabiliti.
Lo script funziona correttamente sia con Explorer 5.x che con Netscape 6.x; con Navigator, invece, non verrà visualizzato nessun effetto ma non verrà restituito nessun errore.
L'esempio si compone di 1 file:
- esempio.htm
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.
Inseriamo il codice tra i tag <head> della pagina che contiene il form:
<script type="text/javascript" language="javascript">
function flasher(){
var swap = new Array(3)
swap[0]="yellow"
swap[1]="red"
swap[2]="blue"
swap[3]="green"
swap[4]="skyblue"
swap[5]="salmon"
swap[6]="purple"
swap[7]="pink"
var i =Math.floor(Math.random() * 7) + 1
document.flash.bottone1.style.backgroundColor=swap[i]
document.flash.bottone1.style.color="yellow
Stop=setTimeout("flasher()",80)
}
function stopFlash(){
clearTimeout(Stop)
}
</script>
Vediamo come modificare lo script per personalizzarlo:
swap[0]="yellow"
swap[1]="red"
swap[2]="blue"
swap[3]="green"
swap[4]="skyblue"
swap[5]="salmon"
swap[6]="purple"
swap[7]="pink"
sono gli array contenenti i colori che dovrà assumere il bottone del form.
Possiamo aggiungere un numero di colori a piacimento, dovremo solo seguire il giusto ordine degli indici tra le parentesi quadrate.
var i =Math.floor(Math.random() * 7) + 1
questa stringa è molto importante. per far sì che vengano mostrati tutti i colori impostati, dovremo sostituire il numero "7" con il valore dell'ultimo indice dell'array (nel caso di questo script non dovremo sostituire nulla).
Credo che un altro esempio possa aiutare. Supponiamo di impostare un array con 4 colori (ricordo che gli array partono da indice 0):
swap[0]="yellow"
swap[1]="red"
swap[2]="blue"
swap[3]="green"
la stringa dovrà essere così impostata:
var i =Math.floor(Math.random() * 3) + 1
document.flash.bottone1.style.backgroundColor=swap[i]
document.flash.bottone1.style.color="yellow"
il colore "yellow" indica il colore del testo del bottone. è fondamentale anche impostare correttamente i nomi degli elementi in queste due stringhe.
"flash" e "bottone1" sono, rispettivamente, il nome del form e del bottone; i nomi dovranno corrispondere a quelli presenti nel modulo.
Stop=setTimeout("flasher()",80)
il valore "80" indica l'intervallo di tempo tra un colore e l'altro
A questo punto non ci resta che richiamare lo script nel nostro modulo.
Supponiamo di avere un normale form così costruito:
<form name="flash">
<input type="text" name="prova" size="40">
<input type="button" name="bottone1" value="Invia">
</form>
Il richiamo allo script andrà inserito nel tag del "button". Le stringhe da inserire sono le seguenti:
onMouseOver="flasher()" onMouseOut="stopFlash()"
E quindi il nostro form diventerà:
<form name="flash">
<input type="text" name="prova" size="40">
<input type="button" name="bottone1" value="Invia" onMouseOver="flasher()"
onMouseOut="stopFlash()">
</form>
Altre modifiche non sono necessarie.
