Sprite di immagini CSS
Sprite di immagini
Uno sprite di immagini è una raccolta di immagini inserite in una singola immagine.
Una pagina Web con molte immagini può richiedere molto tempo per il caricamento e genera più richieste del server.
L'uso degli sprite di immagini ridurrà il numero di richieste del server e farà risparmiare larghezza di banda.
Sprite di immagini - 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:
Esempio
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Esempio spiegato:
<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 che specifichiamo in CSSwidth: 46px; height: 44px;- Definisce la parte dell'immagine che vogliamo utilizzarebackground: 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 di immagini, ora vogliamo espanderlo utilizzando collegamenti ed effetti al passaggio del mouse.
Sprite di immagini: crea un elenco di navigazione
Vogliamo usare l'immagine sprite ("img_navsprites.gif") per creare un elenco di navigazione.
Useremo un elenco HTML, perché può essere un collegamento e supporta anche un'immagine di sfondo:
Esempio
#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;
}
Esempio spiegato:
- #navlist {position:relative;} - la posizione è impostata su relativa per consentire il posizionamento assoluto al suo interno
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - il margine e il padding sono impostati su 0, lo stile elenco viene 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 inizia a posizionare e modellare per ogni parte specifica:
- #home {left:0px;width:46px;} - Posizionato tutto 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 (0px a sinistra, 0px in alto)
- #prev {left:63px;width:43px;} - Posizionato 63px a destra (#home width 46px + un po' di 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 (#home width 46px + 1px line divider)
- #next {left:129px;width:43px;}- Posizionato 129px a destra (l'inizio di #prev è 63px + #prev width 43px + spazio extra) e la larghezza è 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Definisce l'immagine di sfondo 91px a destra (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )
Sprite di immagini - Effetto al passaggio del mouse
Ora vogliamo aggiungere un effetto al passaggio del mouse al nostro elenco di navigazione.
Suggerimento: il :hoverselettore può essere utilizzato su tutti gli elementi, non solo sui collegamenti.
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 di caricamento quando un utente passa il mouse sopra l'immagine.
Aggiungiamo solo tre righe di codice per aggiungere l'effetto al passaggio del mouse:
Esempio
#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;
}
Esempio spiegato:
- #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 45px più in basso