Uno sprite di immagine è una raccolta di immagini inserite in una singola immagine.

Una pagina Web con molte immagini può richiedere molto tempo per essere caricata e genera più richieste al server.

L'utilizzo degli sprite immagine ridurrà il numero di richieste del server e farà risparmiare larghezza di banda.

Sprite di immagine - Esempio semplice

Invece di utilizzare tre immagini separate, utilizziamo questa singola immagine ("img_navsprites.gif"):

Con i CSS possiamo mostrare solo la parte dell'immagine di cui abbiamo bisogno. Nell'esempio seguente il CSS specifica quale parte dell'immagine "img_navsprites.gif" mostrare:

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Visualizza esempio

Spiegazione dell'esempio

• <img id="home" src="img_trans.gif"> - Definisce solo una piccola immagine trasparente perché l'attributo src non può essere vuoto. L'immagine visualizzata sarà l'immagine di sfondo specificata nel CSS
• width: 46px; height: 44px; - Definisce la porzione dell'immagine che vogliamo utilizzare
• background: url(img_navsprites.gif) 0 0; - Definisce l'immagine di sfondo e la sua posizione (0px a sinistra, 0px in alto)

Questo è il modo più semplice per utilizzare gli sprite delle immagini, ora vogliamo espanderlo utilizzando i collegamenti e gli effetti al passaggio del mouse.

Sprite di immagini: crea un elenco di navigazione

Vogliamo utilizzare l'immagine sprite ("img_navsprites.gif") per creare un elenco di navigazione.

Utilizzeremo un elenco HTML, perché può essere un collegamento e supporta anche un'immagine di sfondo:

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Visualizza esempio

Spiegazione dell'esempio

• #navlist {position:relative;} - la posizione è impostata su relative per consentire il posizionamento assoluto al suo interno
• #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin e padding sono impostati a 0, list-style è rimosso, e tutti gli elementi dell'elenco sono posizionati in modo assoluto
• #navlist li, #navlist a {height:44px;display:block;} - l'altezza di tutte le immagini è 44px

Ora si inizia a posizionare e modellare ciascuna parte specifica:

• #home {left:0px;width:46px;} - Posizionato completamente a sinistra e la larghezza dell'immagine è 46px
• #home {background:url(img_navsprites.gif) 0 0;} - Definisce l'immagine di sfondo e la sua posizione (sinistra 0px, alto 0px)
• #prev {left:63px;width:43px;} - Posizionato 63px a destra (larghezza #home 46px + spazio extra tra gli elementi) e la larghezza è 43px
• #prev {background:url('img_navsprites.gif') -47px 0;} - Definisce l'immagine di sfondo 47px a destra (larghezza #home 46px + divisore di linea 1px)
• #next {left:129px;width:43px;} - Posizionato 129px a destra (l'inizio di #prev è 63px + #prev larghezza 43px + spazio extra) e la larghezza è 43px
• #next {background:url('img_navsprites.gif') -91px 0;} - Definisce l'immagine di sfondo 91px a destra (#home larghezza 46px + divisore di linea 1px + #prev larghezza 43px + divisore di linea 1px)

Sprite dell'immagine: effetto al passaggio del mouse

Ora aggiungiamo un effetto hover al nostro elenco di navigazione.

La nostra nuova immagine ("img_navsprites_hover.gif") contiene tre immagini di navigazione e tre immagini da utilizzare per gli effetti al passaggio del mouse:

Poiché si tratta di una singola immagine e non di sei file separati, non ci sarà alcun ritardo nel caricamento quando un utente passa il mouse sopra l'immagine. Aggiungiamo solo tre righe di codice per aggiungere l'effetto hover:

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Visualizza esempio

Spiegazione dell'esempio

• #home a:hover { background: url('img_navsprites_hover.gif') 0 -45px;} - Per tutte e tre le immagini al passaggio del mouse specifichiamo la stessa posizione dello sfondo, solo 45 px più in basso