Rollover veloce senza precaricamento

Molto spesso capita, durante la creazione di un sito web,  di voler ottenere un testo con effetto rollover con delle immagini.

Per ottenere un buon effetto, è necessario utilizzare un precaricamento di tutte le immagini utilizzate nelle hover che fà però aumentare il numero di richieste HTTP al server.

Ad esempio dobbiamo avere  gli elementi <a con display:block; e le proprietà di padding e background con immagini per le  a, a:hover e a:active per ottnere un rollovere.

Quindi avremo del codice CSS di questo tipo:
#menu a {
...
background: url("button.gif") top left no-repeat;
}
#menu a:hover {
...
background-image: url("button-over.gif");
}
#menu a:active {
...
background-image: url("button-active.gif");
}

/* etc… */

Per semplificare il rollovere spesso è utilizzato una sola immagine che contiente tutti i vari stati del bottone: normale, :hover, and :active.

rollover background image

In questo modo avremo una sola immagine che si sposta modificando il background position, ad esempio con il seguente codice CSS:
#menu a {
background: url("button.gif") 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}

Se volete ottenere qualcosa di più complicato potete visualizzare il video al seguente link:
LINK

Lascia un commento