disign.it | Rollover con unica immagine | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.199 visualizzazioni

Rollover con unica immagine

26/07/2011

Da alcuni mesi si discute molto del modo più leggero con cui interpretare i rollover e gestirli attarverso i diversi strumenti e linguaggi.

Una delle tecniche maggiormente consigliata oggi è quella di utilizzare un'immagine unica che comprende tutti gli stati del rollover e attraverso CSS definirne la posizione di background in modo da far visualizzare la porzione di immagine che corrisponde allo stato richiesto.

Nel nostro caso realizziamo un'imagine di esempio che semplicemente ha due colori (larga 200px, alta 70px)

 

 

e poi attraverso il CSS visualizziamo in uno stato la porzione blu e nell'altro il secondo colore, semplicemente così

 

a.roll {
display: block;
width: 200px;
height: 35px;
background: url(puls.jpg) no-repeat 0 0
}

a.roll:hover
{
    background-position: 0 -35px;
}

 

Il codice html sarà quindi

 

 a href="javascript:;" class="roll"     /a

 

In questo modo non abbiamo bisogno di preload, e una volta acricata la pagina anche le immagini di roolover saranno prtesenti in cache riducendo tempi di scaricamento e numero dei file da negoziare!

 

L'esempio lo trovate qui!

← Rollover javascript con il minimo del codice Editor per formato flv →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.