Rollover con unica immagine

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!