CSS sprite: una valida alternativa ai rollover

Per molto tempo ho cercato di inserire dei pulsanti fatti con un un rollover di immagini all'interno del mio blog, senza mai riuscirci. Dopo un po' di ricerche sul web ho finalmente trovato un modo per farlo. In particolare l'articolo originale si trova a questo link.

La tecnica si basa sull'utilizzo dei CSS e ha il vantaggio (rispetto alla tecnica tradizionale basata sull'uso di javascript) di essere molto più leggera e semplice da realizzare.

Il risultato dell'effetto che andremo a realizzare è questo:

Questo tipo di rollover (che esattamente viene chiamato "sprite") e può essere utilizzato per creare dei pulsanti, o dei menu, e può essere inserito sia all'interno di un post su blogger, che come elemento html ad esempio nella sidebar, o nel footer del blog.


Per realizzare questo tipo di pulsante, dobbiamo per prima cosa creare l'immagine del pulsante con un qualsiasi software di grafica come Photoshop o Gimp. L'immagine dovrà contenere sia (a sinistra) il pulsante nel suo stato di inattività (off) che (a destra) il pulsante illuminato dal passaggio del mouse (on), in questo modo:

 

Dopodiché dobbiamo inserire nel template questa riga di codice che definisce il pulsante:

.pulsante {
width: 197px;
height: 35px;
}

.pulsante a {
display: block;
width: 197px;
height: 35px;
background: url(http://url-immagine.jpg) no-repeat top left;
}

.pulsante a:hover {
background-position: top right;
}

Potete sostituire a "pulsante" il nome che preferite, ma tenetelo a mente perché dovremo utilizzarlo fra poco. Il valore "height" deve corrispondere all'altezza in pixel dell'immagine, invece il valore "width" deve essere (sempre in pixel) la metà della larghezza dell'immagine (poiché il pulsante nel suo stato di off dovrà visualizzarne solo la metà sinistra).
Chiaramente a "url-immagine" sostituiremo l'indirizzo della nostra immagine che abbiamo precedentemente caricato sul nostro dominio, o su un servizio di archiviazione online gratuito come imageshack o picasa.

Il codice deve essere inserito prima di questa riga:

/* -- layout -- */

Una volta salvato il modello, possiamo inserire all'interno di un post qualsiasi, o come elemento html questa piccola parte di codice, sostituendo a "link_pulsante" il link al quale vogliamo che punti il nostro pulsante:

<div class="pulsante"><a href="http://link-pulsante.html"></a></div>