101
Mise en forme des liens
Survol avec images
Le.changement.des.couleurs.d’arrière-plan.fonctionne.bien.pour.les.boutons.simples,.mais,.
pour. des. boutons. plus. sophistiqués,. vous. chercherez. sans. doute. à. utiliser. des. images.
d’arrière-plan.. Dans. l’exemple. suivant,. j’ai. créé. trois. images. de. bouton  :. une. pour. l’état.
par.défaut,.une.autre.pour.l’état.de.survol.et.le.focus.et.une.dernière.pour.l’état.actif.(voir.
Figure 5.10)..
Figure 5.10
Les images pour l’état
par défaut, le survol et
l’état actif du bouton.
Le. code. de. cet. exemple. ressemble. à. celui. de. l’exemple. précédent.. La. principale. différence. tient. à. l’utilisation. des. images. d’arrière-plan. au. lieu. des. bordures. et. des. couleurs.
d’arrière-plan.
a:link, a:visited {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(/img/button.png) left top no-repeat;
}
a:hover, a:focus { background-image: url(/img/button-over.png);
}
a:active {
background-image: url(/img/button-active.png);
}
sions.explicites.en.pixels.dans.le.code.CSS..Pour.obtenir.le.traitement.précis.que.je.souhaitais.pour.le.texte,.j’ai.inclus.le.texte.du.bouton.sur.l’image.puis.sorti.le.texte.d’ancre.
de. l’écran. à. l’aide. un. retrait. négatif. très. grand.. Rien. n’empêche. cependant. de. créer. des.
images.de.bouton.de.grand.format.ou.d’utiliser.une.combinaison.de.couleurs.d’arrière-plan.
et.d’images.pour.créer.un.bouton.fluide.ou.élastique.