Travaux pratiques
TROISIÈME PARTIE
184
Ce menu graphique occupera 300 pixels de large pour une hauteur globale de
270 pixels. Chaque tranche de l’image s’y éclairera lors du passage de la souris.
Il convient de rassembler dans un seul fichier graphique l’ensemble des éléments
nécessaires. Le plus simple est de placer l’une sous l’autre les deux versions complètes, sombre et éclaircie, de cette photographie. Il faut donc prévoir pour cela une
image de hauteur double (figure 13-6),
Cette image unique nous suffira. Au repos, seules les tranches de sa partie haute (les
270 premiers pixels) seront reprises. Lors du passage du pointeur de la souris,
l’arrière-plan du bouton correspondant sera décalé en hauteur pour reprendre la
bonne tranche éclaircie.
Chaque lien ou bouton occupe ici une hauteur de 40 pixels. L’image sera donc
déplacée de -40px d’un bouton à l’autre, et de 270 pixels supplémentaires (sa hauteur
globale) pour les versions activées des tranches : -270px pour le premier, -310px pour
le deuxième, etc. Le code, donné ci-après, est émaillé de commentaires CSS placés
entre les mêmes séparateurs qu’en langage C : /* texte du commentaire */.
Figure 13–6
Image de fond pour le
menu et son survol