Semplice rollover sui bottoni grigi dei form

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Questa settimana vedremo un semplicissimo esempio di animazione sui classici bottoni grigi dei form. I Css (www.risorse.net/css) e Javascript (www.risorse.net/javascript) permettono, con poche righe di codice, di creare un buon effetto, purtroppo visualizzabile solo con Microsoft Internet Explorer.
Vediamo quindi di inserire il foglio di stile per impostare il tipo di animazione:

<STYLE TYPE="text/css">
.over {color:yellow; background:navy}
.down {color:yellow; background:navy; font-style:italic}
</STYLE>

.over e .down sono le classi che verranno richiamate in seguito tramite alcuni gestori degli eventi.
Tra le parentesi graffe vengono definiti gli stili del bottone. Quando il mouse si troverà sopra il pulsante, esso sarà di colore blu con testo giallo, mentre quando ci si cliccherà sopra, il pulsante verrà inclinato verso destra grazie allo stile italic (corsivo).

Queste animazioni vengono richiamate tramite i gestori degli eventi:
onmouseover: si scatena quando il cursore passa sopra l'oggetto.
onmouseout: il puntatore si allontana dalla zona dell'elemento.
onmousedown: si clicca sopra l'oggetto.
onmouseup: viene rilasciato il tasto del mouse.

<INPUT TYPE=BUTTON VALUE="Clicca qui" ONMOUSEOVER="this.className = 'over';" ONMOUSEOUT="this.className = '';" ONMOUSEDOWN="this.className = 'down';" ONMOUSEUP="this.className = 'over';">

Al momento di un nostro click, si può sostituire l'effetto di inclinazione del bottone con un tasto più grande, per esempio cambiando all'interno del Css la riga:

.down {color:yellow; background:navy; font-style:italic}

con

.down {color:yellow; background:navy; font-weight:bold}

Ecco che abbiamo creato una semplice animazione utilizzando solamente un foglio di stile e quattro gestori di eventi.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/febbraio/27.asp?print=ok