Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Rollover veloce senza precaricamento

Febbraio 11th, 2009 by Giovanni Caputo

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

Questo post è stato postato mercoledì, Febbraio 11th, 2009 at 00:05 nella categoria Programmazione, Siti Web. Tags:, , , , .
Puoi seguire tutti i commenti di questo articolo attraverso RSS 2.0 feed. Puoi lasciare un commento, o trackback dal nostro sito.

Lascia un commento

You must be loggati to post a comment.