Images réactives et menus graphiques
CHAPITRE 13
181
aussi bien (voire mieux) et sans nécessiter de chargement préalable. Nous en présentons une ci-après ; c’est celle qui nous servira à concevoir un menu graphique avec
survol en CSS.
Une image réactive : seconde méthode
La méthode traditionnelle prévoit deux images pour chaque bouton de menu graphique, respectivement associées à son état au repos et à son survol par le pointeur de
la souris. Il faut donc produire deux images par bouton, soit dix images pour un
menu de cinq liens.
Cette nouvelle méthode, dite des « portes coulissantes », n’utilise qu’une seule image,
quel que soit le nombre de boutons du menu. Le principe de base consiste à faire
coulisser l’arrière-plan entre l’état de repos et l’état actif.
La technique des portes coulissantes simplifie à la fois le travail du graphiste (qui
devra ne créer qu’une seule image) et celui du programmeur (nul besoin de prévoir un
préchargement car tous les éléments graphiques nécessaires, au repos ou actifs, seront
chargés avec la page web).
Commençons par un bouton simple (une image réactive qui sert de lien, large de
150 pixels et haute de 40). La figure 13-1 le représente au repos ; la figure 13-2
indique son aspect lorsqu’il se trouve sous le pointeur de la souris.
RESSOURCE Méthode des portes coulissantes
L’excellent site Pompage.net propose une traduction en français de l’article original exposant la technique des portes coulissantes :
B http://www.pompage.net/pompe/portescoulissantes2/
Cet article a fait l’objet d’un tutoriel sur le site Alsacreations :
B http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
Figure 13–1
Bouton au repos
Figure 13–2
Bouton activé par le
passage du pointeur de
la souris
CHAPITRE 13
181
aussi bien (voire mieux) et sans nécessiter de chargement préalable. Nous en présentons une ci-après ; c’est celle qui nous servira à concevoir un menu graphique avec
survol en CSS.
Une image réactive : seconde méthode
La méthode traditionnelle prévoit deux images pour chaque bouton de menu graphique, respectivement associées à son état au repos et à son survol par le pointeur de
la souris. Il faut donc produire deux images par bouton, soit dix images pour un
menu de cinq liens.
Cette nouvelle méthode, dite des « portes coulissantes », n’utilise qu’une seule image,
quel que soit le nombre de boutons du menu. Le principe de base consiste à faire
coulisser l’arrière-plan entre l’état de repos et l’état actif.
La technique des portes coulissantes simplifie à la fois le travail du graphiste (qui
devra ne créer qu’une seule image) et celui du programmeur (nul besoin de prévoir un
préchargement car tous les éléments graphiques nécessaires, au repos ou actifs, seront
chargés avec la page web).
Commençons par un bouton simple (une image réactive qui sert de lien, large de
150 pixels et haute de 40). La figure 13-1 le représente au repos ; la figure 13-2
indique son aspect lorsqu’il se trouve sous le pointeur de la souris.
RESSOURCE Méthode des portes coulissantes
L’excellent site Pompage.net propose une traduction en français de l’article original exposant la technique des portes coulissantes :
B http://www.pompage.net/pompe/portescoulissantes2/
Cet article a fait l’objet d’un tutoriel sur le site Alsacreations :
B http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
Figure 13–1
Bouton au repos
Figure 13–2
Bouton activé par le
passage du pointeur de
la souris