Sprites d'image CSS
Sprites d'image
Un sprite d'image est une collection d'images placées dans une seule image.
Une page Web avec de nombreuses images peut prendre beaucoup de temps à se charger et génère plusieurs requêtes de serveur.
L'utilisation de sprites d'image réduira le nombre de requêtes du serveur et économisera de la bande passante.
Sprites d'image - Exemple simple
Au lieu d'utiliser trois images distinctes, nous utilisons cette image unique ("img_navsprites.gif") :
Avec CSS, nous pouvons afficher uniquement la partie de l'image dont nous avons besoin.
Dans l'exemple suivant, le CSS spécifie quelle partie de l'image "img_navsprites.gif" afficher :
Exemple
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Exemple expliqué :
<img id="home" src="img_trans.gif">- Définit uniquement une petite image transparente car l'attribut src ne peut pas être vide. L'image affichée sera l'image d'arrière-plan que nous spécifions dans CSSwidth: 46px; height: 44px;- Définit la partie de l'image que nous voulons utiliserbackground: url(img_navsprites.gif) 0 0;- Définit l'image de fond et sa position (gauche 0px, haut 0px)
C'est le moyen le plus simple d'utiliser des sprites d'image, maintenant nous voulons l'étendre en utilisant des liens et des effets de survol.
Image Sprites - Créer une liste de navigation
Nous voulons utiliser l'image sprite ("img_navsprites.gif") pour créer une liste de navigation.
Nous utiliserons une liste HTML, car il peut s'agir d'un lien et prend également en charge une image d'arrière-plan :
Exemple
#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;
}
Exemple expliqué :
- #navlist {position:relative;} - la position est définie sur relative pour permettre un positionnement absolu à l'intérieur
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - la marge et le remplissage sont définis sur 0, le style de liste est supprimé et tous les éléments de la liste sont en position absolue
- #navlist li, #navlist a {height:44px;display:block;} - la hauteur de toutes les images est de 44px
Commencez maintenant à positionner et à styliser chaque partie spécifique :
- #home {left:0px;width:46px;} - Positionné tout à gauche et la largeur de l'image est de 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Définit l'image d'arrière-plan et sa position (gauche 0px, haut 0px)
- #prev {left:63px;width:43px;} - Positionné 63px à droite (#home width 46px + un peu d'espace supplémentaire entre les éléments), et la largeur est de 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Définit l'image d'arrière-plan 47px à droite (#home largeur 46px + 1px séparateur de ligne)
- #next {left:129px;width:43px;}- Positionné 129px à droite (le début de #prev est de 63px + #prev width 43px + extra space), et la largeur est de 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Définit l'image d'arrière-plan 91px à droite (#home largeur 46px + 1px séparateur de ligne + #prev largeur 43px + 1px séparateur de ligne)
Image Sprites - Effet de survol
Nous voulons maintenant ajouter un effet de survol à notre liste de navigation.
Astuce : Le :hoversélecteur peut être utilisé sur tous les éléments, pas seulement sur les liens.
Notre nouvelle image ("img_navsprites_hover.gif") contient trois images de navigation et trois images à utiliser pour les effets de survol :
Comme il s'agit d'une seule image et non de six fichiers distincts, il n'y aura pas de délai de chargement lorsqu'un utilisateur survolera l'image.
Nous n'ajoutons que trois lignes de code pour ajouter l'effet de survol :
Exemple
#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;
}
Exemple expliqué :
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Pour les trois images de survol, nous spécifions la même position d'arrière-plan, seulement 45px plus bas