JavaScript non è l’unica alternativa per creare link o immagini di rollover per il vostro sito web. Esiste un’altra tecnica basa sui i CSS, i famosi fogli di stile, che ci permette di creare rollover con immagini e link. Procederemo con alcuni esempi e mostrando il codice da inserire nelle pagine web.

Foglio di stile stile.css
[css]
.rollover {
font: 12px Verdana, sans-serif; /* imposta il font del testo */
background: #FFFFFF; /* imposta lo sfondo del testo bianco */
}

.rollover a:hover {
color: #039; /* colore testo blu */
border-bottom: 3px solid #FFCC00; /* inserisce una linea arancione sotto il testo */
background: #FFFF99; /* imposta lo sfondo del testo giallo */
}
[/css]Come notate abbiamo creato due classi che hanno lo stesso nome eccetto per la seconda che si chiama .rollover a:hover . Quella classe indica cosa deve accadere quando passiamo il mouse sopra il nostro link.

adesso creiamo una pagina di esempio dove andremo ad inserire il seguente codice html.

[html]

[/html] dovremmo avere un risultato come nell’esempio sotto riportato.

Il blog di Giulio

Usando lo stesso metodo il rollover si può fare anche con delle immagini, se avete un minimo di dimestichezza con i fogli di stile non dovreste avere problemi.

Per maggiori informazioni sui css vi consiglio di dare uno sguardo al sito http://html.it.