Cookie

TheJoe.it Into the (open) source

24dic/102

CSS Sprites: il rollover con una sola immagine usando i CSS

contattaci_shoot

Torniamo a parlare di CSS. Oggi vediamo una tecnica da sempre consigliata per alleggerire le pagine e velocizzare i tempi di caricamento (non per niente da anni è utilizzata sulla homepage di Google).

In breve si tratta di includere la maggior parte degli elementi di navigazione della pagina all'interno di un unico file immagine, per poi richiamarlo tante volte quante ne richiederà la pagina evitando così il caricamento di più immagini differenti.

Anche se tecnicamente lo scarto di tempo è molto esiguo (siamo nel campo dei centesimi, se non millesimi di secondo) la differenza si vede, ed anche dal punto di vista estetico trovarsi le immagini caricate tutte in una volta da un'impressione di maggior velocità.

Vediamo ad esempio l'immagine che utilizza Google nelle sue ricerche:

L'immagine usata da Google

L'immagine usata da Google

Qualcuno avrà già riconosciuto alcuni elementi costantemente richiamati all'interno della pagina delle ricerche, come ad esempio il logo, la "O" ripetuta a fondo pagina, le frecce di direzione che indicano pagina precedente e successiva, la favicon, le stelle per la valutazione dei risultati e mi fermo qui.

Per l'inclusione dell'immagine all'interno della pagina Google utilizza in parte Javascript e in parte i CSS. Non mi dilungherò sui princìpi alla base di questa scelta, basti sapere che la mole di richieste che ogni giorno Google deve evadere è così ampia che anche una minima ottimizzazione della pagina corrisponde ad un risparmio notevole (economicamente ed ecologicamente) per Google stessa e per tutti noi.

Lasciando perdere per oggi Javascript passiamo ad analizzare i passaggi perché l'effetto venga restituito utilizzando solo HTML e CSS. Iniziamo con qualcosa di semplice: il bottone seguente è formato da due immagini. I passaggi che vedremo serviranno a creare l'effetto rollover al passaggio del mouse con una sola immagine. L'immagine totale misura 343 pixel di larghezza x 212 pixel in altezza: è molto grande per essere un bottone, ma questo è semplicemente un esempio.

Iniziamo a vedere come formattare l'HTML.

<a id="contattaci" href="#" title="contattaci"><span>Contattaci</span></a>

Questa sarà la riga HTML che mostrerà il bottone all'interno della pagina. Da notare l'attributo "ID" il cui stile verrà poi modificato tramite i CSS. E' facile notare che la riga qui sopra in realtà non contiene link ad alcuna immagine, è semplicemente un link testuale: "Contattaci".

Ed ora vediamo come impostare il CSS per trasformare il nostro link in un bottone con effetto rollover del mouse:

#contattaci{
  display: block;
  width: 343px;
  height: 106px;
  background: url("img/bottone.png") no-repeat 0 0;
}

#contattaci:hover{
  background-position: 0 -106px;
}

#contattaci span{
  display: none;
}

Occhio a richiamare l'immagine giusta. Io l'ho messa nella directory "img". Il bottone è molto grande, com'è semplice notare la larghezza è quella iniziale dell'immagine (width: 343px;), mentre l'altezza è esattamente la metà (height: 106px;). Nel caso in cui il mouse non passi sopra al bottone verrà mostrata la metà superiore del bottone (i primi 106 pixel), mentre se vediamo la seconda regola alla voce "background-position" possiamo notare un valore negativo "-106px". Questa regola posizionerà il bottone 106px in alto, facendoci di fatto vedere solo la seconda metà dell'immagine nella stessa posizione in cui si trovava la prima.

La terza regola serve semplicemente a nascondere il testo "Contattaci".

Per avere l'anteprima del funzionamento clicca qui.

About

Mantengo questo blog a livello amatoriale dal 2009. Sono appassionato di grafica, tecnologia, software Open Source. Fra i miei articoli non sarà difficile trovarne circa la musica, ed alcuni di riflessioni personali, ma preferisco indirizzare la linea del blog principalmente verso la tecnologia. Per informazioni contattami.

Commenti (2) Trackback (0)
  1. Wow, grazie Luca per il commento tecnico. Ho già provveduto a modificare il titolo. 😉

  2. Per completezza, quando si parla di questa tecnica si parla più frequentemente di “CSS Sprites”, il rollover è il risultato pratico che si ottiene (che essendo completamente CSS non genera problemi di compatibilità su browser differenti o con chi ha javascript disabilitato).

    BTW, nice one 😉


Leave a comment

Ancora nessun trackback.