Travaux pratiques
TROISIÈME PARTIE
182
Rassemblons ces deux états dans une image unique, reprise figure 13-3, large de
150 pixels et haute de 80 (les deux états du bouton y sont en effet placés l’un sur
l’autre). Il suffira alors d’en sélectionner la bonne portion à tout instant.
L’élément du lien recevra les dimensions d’un seul bouton : 150px par 40px. Il
suffira ensuite de jouer sur la position pour sélectionner une portion de l’image
d’arrière-plan et ne représenter que le bon bouton, comme l’illustre la figure 13-4.
Dans la pratique, on écrit ceci :
Quand la propriété background-position reçoit la valeur 0 -40px, cela déplace
l’arrière-plan de 40 pixels vers le haut (les deux paramètres correspondant respectivement aux déplacements en abscisses et en ordonnées). C’est alors que la deuxième
partie de l’image, jusqu’ici masquée, entre en scène (schéma de la figure 13-4).
Figure 13–3
Image cataloguant les
états possibles
Figure 13–4
Les portes coulissantes
Au repos:
background: url(image.jpg) no-repeat 0 0;
Au survol:
background-position: 0 -40px;
RÉFÉRENCE Didacticiel pour images de fond accessibles
Le site suivant reprend de manière simple et concrète la technique des portes coulissantes pour créer des
liens graphiques :
B http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
TROISIÈME PARTIE
182
Rassemblons ces deux états dans une image unique, reprise figure 13-3, large de
150 pixels et haute de 80 (les deux états du bouton y sont en effet placés l’un sur
l’autre). Il suffira alors d’en sélectionner la bonne portion à tout instant.
L’élément du lien recevra les dimensions d’un seul bouton : 150px par 40px. Il
suffira ensuite de jouer sur la position pour sélectionner une portion de l’image
d’arrière-plan et ne représenter que le bon bouton, comme l’illustre la figure 13-4.
Dans la pratique, on écrit ceci :
Quand la propriété background-position reçoit la valeur 0 -40px, cela déplace
l’arrière-plan de 40 pixels vers le haut (les deux paramètres correspondant respectivement aux déplacements en abscisses et en ordonnées). C’est alors que la deuxième
partie de l’image, jusqu’ici masquée, entre en scène (schéma de la figure 13-4).
Figure 13–3
Image cataloguant les
états possibles
Figure 13–4
Les portes coulissantes
Au repos:
background: url(image.jpg) no-repeat 0 0;
Au survol:
background-position: 0 -40px;
RÉFÉRENCE Didacticiel pour images de fond accessibles
Le site suivant reprend de manière simple et concrète la technique des portes coulissantes pour créer des
liens graphiques :
B http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique