Sprites immagine
Un sprite immagine è una raccolta di immagini messe in una singola immagine.
Una pagina web con molte immagini può richiedere molto tempo per caricare e genera più richieste al server.
Utilizzando immagini sprite ridurrà il numero di richieste al server e risparmiare larghezza di banda.
Sprites Immagine - Esempio semplice
Invece di usare tre immagini separate, usiamo questa immagine singola ("img_navsprites.gif") :
Con i CSS, possiamo mostrare solo la parte dell'immagine che ci serve.
Nell'esempio che segue il CSS specifica quale parte del "img_navsprites.gif" immagine per mostrare:
Esempio
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
} Prova tu stesso " Esempio spiegato:
-
<img id="home" src="img_trans.gif">- definisce una piccola immagine trasparente solo perché l'attributo src non può essere vuoto. L'immagine visualizzata sarà l'immagine di sfondo si precisa in CSS -
width: 46px; height: 44px;width: 46px; height: 44px;- Definisce la porzione di immagine che vogliamo usare -
background: url(img_navsprites.gif) 0 0;- Definisce l'immagine di sfondo e la sua posizione (0px sinistra, in alto 0px)
Questo è il modo più semplice per usare gli sprite immagine, ora vogliamo espanderlo utilizzando i collegamenti e librarsi effetti.
Sprites Immagine - Creare un elenco di navigazione
Vogliamo usare l'immagine sprite ("img_navsprites.gif") per creare una lista di navigazione.
Useremo una lista 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;
}
Prova tu stesso " Esempio spiegato:
- #navlist {position:relative;} - posizione è impostato per rispetto per consentire il posizionamento assoluto al suo interno
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin e padding è impostato su 0, list-style viene rimosso, e tutti gli elementi della lista sono assoluti posizionato
- #navlist li, #navlist a {height:44px;display:block;} - l'altezza di tutte le immagini sono 44px
Ora inizia a posizione e stile per ogni parte specifica:
- #home {left:0px;width:46px;} - Posizionato tutta la strada 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 sinistra, in alto 0px)
- #prev {left:63px;width:43px;} - 63px a destra (#Home larghezza 46px + qualche spazio in più tra gli elementi) Posizionato, e la larghezza è di 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Definisce il 47px immagine di sfondo a destra (#Home larghezza 46px + 1px linea di divisione)
- #next {left:129px;width:43px;} - Posizionato 129px a destra (inizio del #prev è 63px 43px + larghezza #prev + spazio), e la larghezza è di 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Definisce il 91px immagine di sfondo a destra (#Home larghezza 46px + 1px linea di divisione + larghezza + #prev 43px 1px linea di divisione)
Sprites Immagine - effetto hover
Ora vogliamo aggiungere un effetto hover alla nostra lista di navigazione.
 | Tip: L' :hover selettore può essere usato 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 hover:
Perché questa è una singola immagine, e non sei file separati, non ci saràalcun ritardo di carico quando un utente passa sopra l'immagine.
Aggiungiamo solo tre righe di codice per aggiungere l'effetto hover:
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;
} Prova tu stesso " Esempio spiegato:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Per tutte e tre le immagini al passaggio del mouse si precisa la stessa posizione di fondo, solo 45px più in basso