CSS Sprites d'Image
Sprites d'Image CSS
Un sprite d'image est une collection de diverses petites images regroupées dans un seul fichier image plus grand, appelé "image sprite".
Une image sprite est généralement disposée en grille, comme ceci :
Une page web avec plusieurs images met plus de temps à se charger et génère plusieurs requêtes serveur.
Ainsi, au lieu de télécharger chaque image séparément, le navigateur télécharge le seul fichier d'image sprite, ce qui réduit le nombre de requêtes serveur et diminue l'utilisation de la bande passante.
Exemple de Sprites d'Image CSS
Les propriétés clés CSS utilisées pour les sprites d'image sont :
Ici, le code CSS spécifie quelle partie de l'image sprite ("img_navsprites.gif") afficher pour les différents éléments de navigation (accueil, suivant et précédent) :
Exemple
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background-image: url(img_navsprites.gif);
background-position: 0 0; /* Coin supérieur gauche du sprite */
}
#prev {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -47px 0; /* 47px à gauche du coin supérieur gauche du sprite */
}
#next {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -91px 0; /* 91px à gauche du coin supérieur gauche du sprite */
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif" width="1" height="1">
<img id="prev" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html> Exemple expliqué :
-
width,height- Définit la largeur et la hauteur de chaque partie d'image -
background-image: url(img_navsprites.gif);- Définit l'URL de l'image sprite -
background-position- Déplace l'image de fond dans chaque élément pour afficher uniquement la portion désirée de l'image sprite -
<img id="home" src="img_trans.gif">- Chaque image commence par une petite image transparente car l'attribut src ne peut pas être vide (l'image affichée sera l'image de fond que nous spécifions en CSS)
Sprites d'Image dans une Liste de Navigation
Ici, nous utilisons l'image sprite ("img_navsprites.gif") à l'intérieur d'une liste de navigation. Nous allons utiliser une liste HTML (<ul> et <li>) pour la liste de navigation :
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: 60px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 120px;
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- Définit la marge et le remplissage à 0, supprime les puces, et tous les <li> sont positionnés de manière absolue -
#navlist li, #navlist a- Définit la hauteur de toutes les images à 44px et les affiche en tant que bloc
Maintenant, positionnons et stylisons chaque élément de navigation :
-
#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 de fond et sa position (gauche 0px, haut 0px) -
#prev {left:60px;}- Positionné à 60px à droite (#home largeur 46px + un peu d'espace entre les éléments) -
#prev {background:url('img_navsprites.gif') -47px 0;}- Définit l'image de fond 47px à droite (#home largeur 46px + 1px de séparateur) -
#next {left:120px;}- Positionné à 120px à droite (début de #prev est à 60px + #prev largeur 43px + espace supplémentaire) -
#next {background:url('img_navsprites.gif') -91px 0;}- Définit l'image de fond 91px à droite (#home largeur 46px + 1px de séparateur + #prev largeur 43px + 1px de séparateur)
Sprites d'Image - Effet de Survol
Maintenant, nous voulons ajouter un effet de survol à notre liste de navigation.
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 séparés, il n'y aura pas de délai de chargement lorsque l'utilisateur survole l'image.
Nous ajoutons seulement 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 toutes les trois images de survol, nous spécifions la même position de fond, seulement 45px plus bas