CSS Sprites image

Sprites image

Un sprite image est une collection d'images mises en une seule image.

Une page web avec de nombreuses images peut prendre un certain temps de calcul et génère des demandes de plusieurs serveurs.

Utilisation de sprites d'image permettra de réduire le nombre de requêtes serveur et économiser la bande passante.

---

Sprites image - Exemple simple

Au lieu d'utiliser trois images séparées, nous utilisons cette image unique ("img_navsprites.gif"):

Avec CSS, on peut montrer que la partie de l'image nous avons besoin.

Dans l'exemple suivant, le CSS spécifie quelle partie de la "img_navsprites.gif" l'image à afficher:

Exemple

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

Essayez vous-même »

Exemple expliqué:

• <img class="home" src="img_trans.gif" /> - définit seulement une petite image transparente parce que l'attribut src peut pas être vide. L'image affichée sera l'image de fond que nous indiquons CSS
• Largeur: 46px; hauteur: 44px; - Définit la partie de l'image que nous voulons utiliser
• background: url (img_navsprites.gif) 0 0; - Définit l'image de fond et de sa position (à gauche 0px, 0px en haut)

C'est le moyen le plus facile à utiliser des sprites d'image, maintenant, nous voulons l'étendre à l'aide de liens et de planer effets.

---

Sprites image - Création d'une liste de navigation

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

Nous allons utiliser une liste HTML, car il peut y avoir un lien et prend également en charge 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;}
#home{background:url('img_navsprites.gif') 0 0;}

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

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

Essayez vous-même »

Exemple expliqué:

• # Navlist {position: relative;} - position est définie à par rapport à permettre le positionnement absolu à l'intérieur de l'
• # Navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - marge et le remplissage est fixé à 0, list-style est enlevé, et tous les éléments de la liste sont placés absolue
• # Navlist li, # navlist un {height: 44px; display: block;} - la hauteur de toutes les images sont 44px

Maintenant commencer à la position et le style pour chaque partie spécifique:

• # Home {left: 0px; largeur: 46px;} - Positionné tout le chemin vers la gauche, et la largeur de l'image est 46px
• # Home {background: url (img_navsprites.gif) 0 0;} - Définit l'image de fond et sa position (à gauche 0px, 0px en haut)
• # Diff {left: 63px; largeur: 43px;} - Positionné 63px vers la droite (largeur home # 46px + un peu d'espace supplémentaire entre les articles), et la largeur est 43px.
• # Diff {background: url ('img_navsprites.gif')-47px 0;} - Définit l'image de fond 47px vers la droite (largeur home # 46px + diviseur ligne 1px)
• # Suivante {left: 129px; largeur: 43px;} - Positionné 129px vers la droite (début de # diff est 63px # + diff largeur 43px + espace supplémentaire), et la largeur est 43px.
• # Suivante {background: url ('img_navsprites.gif') no-repeat-91px 0;} - Définit l'image de fond 91px vers la droite (largeur home # 46px + diviseur ligne 1px # + diff largeur 43px + diviseur ligne 1px)

---

Sprites 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 effets de survol:

Comme il s'agit d'une seule image, et non pas six dossiers distincts, il y aura pas de retard de chargement quand 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 vous-même »

Exemple expliqué:

• Depuis l'élément de liste contient un lien, nous pouvons utiliser le: hover pseudo-classe
• # Home a: hover {background: url transparente (img_navsprites_hover.gif) 0-45px;} - Pour toutes les images hover trois nous préciser la position de fond la même, seuls 45px plus bas