Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Grafica Bottone intermittente
Postato da webmaster il Thursday, 30 October @ 08:00:00 CET
Contributo di webmaster

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.

La sezione Javascript

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.

Il richiamo HTML

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>




 
Links Correlati
· Indice Grafica
· Inoltre Grafica
· News by webmaster


Articolo più letto relativo a Grafica:
Immagine che si illumina al passaggio del mouse

Valutazione Articolo
Average Score: 5
Voti: 2


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

GraficaJavascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.05 Secondi

Theme by

© Oceanoweb