Lo script che presentiamo permette di rendere intermittenti i semplici bottoni
dei form. Al posto del classico grigio a cui siamo abituati, si vedranno una serie
di colori che cambieranno ad intervalli di tempo prestabiliti.
Lo script funziona correttamente sia con Explorer che con Netscape,
con Navigator invece, non verrà visualizzato nessun effetto ma non
verrà restituito nessun errore.
Il codice javascript va inserito fra i tags <head> della pagina.
<!-- INIZIO CODICE -->
<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>
<!-- FINE CODICE -->
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.
Si possono aggiungere un numero di colori a piacimento, solo si dovrà 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, si dovrà sostituire il numero "7" con il valore dell'ultimo indice
dell'array (nel caso di questo script non si dovrà 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 resta che richiamare lo script nella pagina.
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 form diventerà:
<form name="flash">
<input type="text" name="prova" size="40">
<input type="button" name="bottone1" value="Invia" onMouseOver="flasher()"
onMouseOut="stopFlash()">
</form>
|
Bottone intermittente
