Sprites d'images CSS

Table des matières

    Afficher la table des matières

Sprites d'images

Un sprite d’image est une collection d’images regroupées en une seule image.

Une page Web contenant de nombreuses images peut prendre beaucoup de temps à charger et générer plusieurs requêtes de serveur.

L'utilisation de sprites d'image réduira le nombre de requêtes du serveur et économisera bande passante.

Sprites d'images - Exemple simple

Au lieu d'utiliser trois images distinctes, nous utilisons cette seule image ("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 du "img_navsprites.gif" image à montrer :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

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 en CSS

width: 46px; height: 44px;

- Définit la partie de l'image que nous voulons utiliser

background: url(img_navsprites.gif) 0 0;

- Définit l'image d'arrière-plan et sa position (gauche 0px, haut 0px)

C'est le moyen le plus simple d'utiliser les sprites d'image, nous souhaitons maintenant l'étendre en utilisant des liens et des effets de survol.

Image Sprites - Créer une liste de navigation

Nous souhaitons utiliser l'image sprite ("img_navsprites.gif") pour créer une liste de navigation.

Nous utiliserons une liste HTML, car elle peut être un lien et supporte également une image de fond :

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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

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 positionnés de manière absolue

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

- la hauteur de toutes les images est de 44px

Commencez maintenant à positionner et à styliser chaque pièce spécifique :

#home {left:0px;width:46px;}

- Positionné complètement à gauche et la largeur de l'image est de 46 pixels

#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 largeur 46px + un 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 de fond 47px à droite (#home largeur 46px + ligne 1px diviseur)

#next {left:129px;width:43px;}

- Positionné 129px à droite (le début de #prev est 63px + #prev largeur 43px + espace supplémentaire), et la largeur est 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 + séparateur de ligne 1px)

Sprites d'image - Effet de survol

Nous souhaitons maintenant ajouter un effet de survol à notre liste de navigation.

Astuce : Le sélecteur :hover 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 :

Puisqu'il s'agit d'une seule image et non de six fichiers distincts, il n'y aura aucun délai de chargement lorsqu'un 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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

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

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

#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

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 45 px plus bas.