DEVENIR-WEBMASTER.COM Log In
 36
download close

Les Sprites

Visiter ma chaine Youtube

# Un sprite qu'est ce que c'est ? close

Un sprite c'est une image. Cette image est particulière car elle contient d'autres images de même taille. Ces images sont disposées en lignes et/ou en colonnes et forment une sorte de grille d'images.

Vous avez deux exemples ci-dessous :

Un exemple de sprite
Un premier constitué d'une colonne de quatre images de 120px par 50px.
Un autre exemple de sprite
Un second constitué de trois colonnes et cinq lignes d'images de 150px par 98px.

# Un sprite comment ça marche ? close

Le sprite est déposé dans le fond d'un conteneur qui a la taille d'une seule image constituant le sprite.

Le conteneur agit comme une fenêtre transparente à travers laquelle on peut voir une seule image du sprite déposée dans le fond.

Le reste du sprite qui déborde du conteneur est caché et ne nous gêne pas.

L'idée c'est de pouvoir choisir au sein du sprite l'image qui nous intéresse et pour cela on va déplacer la position du sprite dans le fond de son conteneur.

Principe de fonctionnement du sprite
Principe de fonctionnement du sprite.

# Un sprite pour faire un rollover close

La première application du sprite c'est proposer un effet visuel lorsque le curseur de votre souris survole un lien. On appelle cet effet un rollover.

Pour faire ça on va se servir du CSS et des pseudo-classes associées aux différents états d'un lien. Pour chaque état qui nous intéresse on va choisir une image en déplaçant le sprite au moyen de la propriété background-position.

Code HTML d'un rollover
Le code HTML d'un rollover

J'attire votre attention sur le fait qu'il est nécessaire de mettre un contenu textuel entre les balises du lien. Sans cela les synthétiseurs vocaux ne comprendront rien.

Toutefois ce texte est visuellement gênant car il recouvre l'image de fond. Il faut le cibler au moyen d'un élément span pour pouvoir le faire disparaître par un moyen CSS approprié.

Code CSS d'un rollover
Le code CSS d'un rollover

Je décris ici les étapes du travail CSS nécessaire à la préparation d'un lien :

  1. On met le lien en display:inline-block; pour pouvoir lui donner des dimensions.
  2. On lui donne la taille d'une seule image du sprite.
  3. On glisse le sprite dans le fond de son conteneur qui est en fait la partie cliquable du lien.
  4. On choisit une première image qui sera utilisée lorsque le lien n'est pas survolé.
  5. On utilise ensuite les pseudo-classes :hover et :active pour cibler ces deux états du lien. On décale les images à l'aide de la propriété background-position. Les décalages ont des valeurs négatives car il faut décaler les images vers la gauche ou/et vers le haut.

Exemple : Utilisation d'un sprite pour faire un rollover

L'intérêt ici est d'éviter d'utiliser le Javascript.

# Un sprite comme collection d'images close

La deuxième application du sprite c'est de pouvoir choisir une seule image encapsulée dans la collection d'images que constitue le sprite.

Ci dessous je fais un exemple dans lequel l'utilisateur peut choisir un mode de paiement.

Le HTML est fait d'un formulaire qui contient trois radio boutons. Les labels sont placés en display:inline-block;pour être dimensionnés. Dans leurs fonds on place un sprite.

Code HTML d'un formulaire de paiement
Le code HTML d'un formulaire avec choix du mode de paiement
Code CSS d'un formulaire de paiement
Le code CSS d'un formulaire avec un sprite mis au fond des labels

Exemple : Utilisation d'un sprite comme collection d'images

L'intérêt d'utiliser un sprite ici réside dans le fait qu'une seule requête serveur permet de charger toutes les images. Il y a un intérêt aussi au niveau du poids des images. Une seule image en qualité jpeg de 80 pèse 6.1 ko. La totalité des 15 images pèse 72 ko soit 4.8 ko par image.

Ci dessous j'ai récupéré ce sprite d'icônes utilisé dans Jquery UI. Une seule icône pèserait 244 octets alors que le sprite de 80 images pèse 5.5ko soit environ 57 octets par image. On bénéficie dans ce cas d'une sorte de factorisation de la table des couleurs qui est identique pour toutes les images.

Sprite utilisé dans Jquery UI
Sprite utilisé dans Jquery UI