Sprites Image
Un sprite d'image est une collection d'images mises en une seule image.
Une page web avec de nombreuses images peut prendre beaucoup de temps à charger et génère des demandes de plusieurs serveurs.
Utilisation de sprites d'image permettra de réduire le nombre de demandes de serveur et économiser la bande passante.
Sprites Image - Exemple simple
Au lieu d'utiliser trois images distinctes, nous utilisons cette seule image ("img_navsprites.gif") :
Avec CSS, nous pouvons montrer que la partie de l'image dont nous avons besoin.
Dans l'exemple suivant , le CSS spécifie quelle partie de la "img_navsprites.gif" image pour afficher:
Exemple
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
} Essayez - le vous - même » Exemple expliqué:
-
<img id="home" src="img_trans.gif">- définit Seule une petite image transparente parce que l'attribut src ne peut être vide. L'image affichée sera l'image d'arrière-plan, nous spécifions en CSS -
width: 46px; height: 44px;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 de fond et sa position (0px gauche, en haut 0px)
Ceci est la meilleure façon d'utiliser des sprites d'image, maintenant nous voulons le développer en utilisant des liens et des effets hover.
Sprites de l'image - Créer une liste de navigation
Nous voulons utiliser l'image de sprite ("img_navsprites.gif") pour créer une liste de navigation.
Nous allons utiliser une liste HTML, car il peut être un lien et soutient é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 » Exemple expliqué:
- #navlist {position:relative;} - position est réglée sur rapport pour permettre le positionnement absolu à l' intérieur
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - marge et le remplissage est réglé sur 0, la liste de style est enlevé, et tous les éléments de la liste sont absolue positionné
- #navlist li, #navlist a {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;width: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 (0px gauche, en haut 0px)
- #prev {left:63px;width:43px;} - 63px à droite (#Page largeur 46px + un espace supplémentaire entre les éléments) Positionné, et la largeur est 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Définit l'image de fond 47px à droite (#Page largeur 46px + 1px ligne diviseur)
- #next {left:129px;width:43px;} - Positionné 129px à droite (début de #prev est 63px + largeur de #prev 43px + espace supplémentaire), et la largeur est 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Définit l'image de fond 91px à droite (#Page largeur 46px + 1px ligne diviseur + largeur de #prev 43px + 1px ligne diviseur)
Sprites de l'image - Hover Effet
Maintenant, nous voulons ajouter un effet de survol à notre liste de navigation.
 | Astuce: Le :hover sélecteur peut être utilisé sur tous les éléments, non seulement sur les liens. |
|---|
Notre nouvelle image ("img_navsprites_hover.gif") contient trois images de navigation et trois images à utiliser pour effets de survol:
Parce que cela est une seule image, et non pas six fichiers séparés, il n'y aurapas de retard de chargementquand un utilisateur survole l'image.
Nous ajoutons seulement trois lignes de code pour ajouter l'effet hover:
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 » Exemple expliqué:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Pour les trois images hover nous spécifions la même position d'arrière - plan, seulement 45px plus bas