Travaux pratiques
TROISIÈME PARTIE
178
Nous allons ici reprendre la même technique, en remplaçant les puces par des boutons. Contraints comme souvent par les bogues et limitations d’Internet Explorer,
nous emploierons une balise préalablement transformée en bloc pour recevoir des
dimensions, et à laquelle nous associerons une image d’arrière-plan :
On attribuera évidemment à l’élément les dimensions de l’image de fond (ici :
une largeur et une hauteur de 100 pixels). On spécifie cette dernière par la propriété
raccourcie background, donnant dans l’ordre le chemin d’accès à l’image, son mode
de répétition et sa position (0 0 la plaçant ici en haut à gauche).
Le décor de la situation par défaut est planté. L’effet de survol sera assuré en remplaçant image1 par image2 lors du passage du pointeur de la souris, ce qu’on spécifie
dans un style portant sur l’élément au moyen de la pseudo-classe :hover complétée par la pseudo-classe :focus pour la navigation au clavier :
Ces seules déclarations suffisent à mettre en place une image réagissant au passage
du pointeur de la souris. La dernière règle se cantonnant à l’instruction backgroundimage, nous nous épargnons la répétition des autres caractéristiques, qui n’ont pas
changé.
Accessibilité de cette technique
Dans la structure HTML, l’image réactive n’a pour trace qu’un simple élément :
HTML

CSS
a.image {
display: block;
width: 100px;
height: 100px;
background: url(image1.png) no-repeat 0 0;
}
a.image:hover, a.image:focus {
background-image: url(image2.png);
}