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 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 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 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 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 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 de fond 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("https://www.Infodewi.com/css/img_navsprites.gif") -47px 0;} – Définit l’image d’arrière-plan 47px à droite (#home largeur 46px + séparateur de ligne 1px)
• #next {left:129px;width:43px;} – Positionné 129px à droite (le début de #prev est de 63px + #prev largeur 43px + espace supplémentaire), et la largeur est de 43px
• #next {background:url("https://www.Infodewi.com/css/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.

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 y aura pas de délai de chargement lorsqu’un utilisateur survole l’image.

Nous n’ajoutons que trois lignes de code pour ajouter l’effet de survol :

Exemple expliqué :

• #home a:hover {background: url("https://www.Infodewi.com/css/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