linguaggio HTML bottoni che si illuminano al passaggio del mouse - di Eliana Argenti e Tommaso Bientinesi su http://www.webfract.it

BOTTONI CHE SI ILLUMINANO AL PASSAGGIO DEL MOUSE

Esempio funzionante (ma solo con MSIE). Per un trucco che funzioni sia con MSIE che con Firefox clicca qui

Un bottone che cambia colore al passaggio del mouse, rende sicuramente più incisivo il nome dell'azione del bottone stesso. Realizzarlo non è difficile, sempre che si ricorra a JavaScript unito ad un tocco di stile.

PRIMO PASSO

Attraverso il seguente codice, da inserire fra i tags <head>ed </head>

<Style Type="TEXT/CSS">
.bottone{BACKGROUND:red; FONT-WEIGHT: bold; FONT-FAMILY:Verdana}
</Style>

viene definito lo stile per il bottone: abbiamo scelto il colore di sfondo rosso (red) e lo stile grassetto (bold) per la scritta. La font è Verdana. Chiaramente queste opzioni possono essere cambiate a seconda dei propri gusti.

Abbiamo chiamato lo stile .bottone, ed ad esso dovremo fare riferimento ogni volta che lo vorremo usare.

SECONDO PASSO

Definiamo la funzione JavaScript con il compito di cambiare il colore.
Ecco il codice, da inserire, anch'esso, fra i tags <head>ed </head>

<script language=JavaScript>
function on(colore) {
event.srcElement.style.backgroundColor=colore
}
</script>

La funzione valuta lo stile dell'elemento che ha attivato l'evento (in questo caso sarà il passaggio del mouse sul bottone) e inserisce come colore di sfondo quello che sarà dichiarato all'interno del tag di dichiarazione del bottone stesso, come vedremo nel

TERZO PASSO

Inseriamo il bottone nella posizione stabilita, attraverso il seguente codice:

<form><INPUT type=button value=www.webfract.it CLASS=bottone
 onMouseOver="on('yellow')" onMouseOut="on('red')" 
onclick="window.open('http://www.webfract.it','_self')"></form>

Come si vede, il bottone viene inserito come elemento di un form: questo è essenziale, altrimenti il codice JavaScript non funziona. CLASS=bottone dà indicazione sullo stile del bottone stesso; infine l'evento onMouseOver="on('yellow')" comanda la funzione Javascript di nome on(colore) ad inserire come colore di sfondo il giallo (yellow) al passaggio del mouse sopra il bottone, mentre onMouseOut="on('red')" comanda la stessa funzione ad inserire come colore di sfondo il rosso (red) quando il mouse lascia il bottone stesso.
L'evento onClick attua il collegamento desiderato.
NOTA BENE: abbiamo aggiunto '_self' perché vogliamo che la nuova pagina si apra nella finestra corrente; se invece vogliamo aprire una pagina in un frame, ad esempio di nome principe, inseriremo l'opzione 'principe'. CLICCA QUI PER LE OPZIONI SUI FRAMES

Non resta che provare!