Come probabilmente avrete notato, da un po' di tempo sono comparse delle icone bianche che fanno riferimento ai miei account pubblici su alcuni social network e al feed rss di questo blog. Passando la freccetta del mouse sopra di essi vedrete che il logo contenuto nell'icona "diventa blu". In realtà sono due immagini diverse, ma carico un'altra immagine al verificarsi di questo evento, vale a dire effettuo quello che viene definito rollover.

Ovviamente per farlo ci servono delle icone, per il momento sto usando le inFocus. Nel dettaglio, un esempio di codice necessario a ottenere questo effetto per realizzare un riferimento carino al nostro account di Twitter.


HTML:
<a href="URL_ACCOUNT_TWITTER" id="twitter" title="Seguimi su Twitter" alt="Seguimi su Twitter" /></a>
CSS:
#twitter {
background: url('URL_ICONA_TWITTER');;
width: 56px;
height: 56px;
display:block;
}
Come potete vedere nell'HTML, il link è "vuoto", infatti non abbiamo un testo relativo, ma come invece si può notare osservando il codice css, un'immagine di sfondo (attributo background), di cui abbiamo anche impostato le dimensioni (attributi width e height), indicando di trattarlo come blocco (scrivendo display:block;).
Ora dobbiamo agire sull'effetto hover. La cosa è abbastanza semplice:
#twitter:hover {
background: url('URL_ICONA_TWITTER_HOVER');;
}
scrivendo :hover indichiamo appunto che questa regola vale quando il cursore del mouse ci passa sopra. C'è però un problema: la prima volta che l'utente passerà la freccetta del mouse sopra alla nostra icona vedrà un brutto effetto causato dal fatto che l'immagine viene caricata in cache solo quando l'evento :hover si verifica. Come ovviare? Semplice!
Quello che possiamo fare è realizzare noi un'immagine che contiene entrambe le immagini, una a destra e una a sinistra. Per esempio:
l'icona per twitter :)
e poi diciamo: "Senti bello, di default caricami la parte di sinistra, ma sull'effetto hover, quella di destra!". Come lo traduciamo in css? Vediamolo subito:
#twitter {
background: url('URL_ICONA_TWITTER') no-repeat left top;;
width: 56px;
height: 56px;
display:block;
}
#twitter:hover {
background: url('URL_ICONA_TWITTER') no-repeat right top;;
}
Con i valori no-repeat left top/no-repeat left top indichiamo di non ripetere lo sfondo e poi il discorso sinistra-destra. Semplice no? Provate e ditemi se non è una figata :D