Affinity-web`Blog

Menu avec rollover

Mes précédents tutos vous ont appris à prendre en main PrototypeJs, pour au final réaliser un système de vote en AJAX. Aujourd'hui je reviens aux fondamentaux : le xHTML et CSS avec la réalisation d'un menu (sous forme d'images) avec changement d'image au survol (effet appelé rollover) et surtout un préchargement de ces images.

Tester la demo pour voir le résultat final.

Vous pouvez télécharger les différentes images qui servent pour le tuto ici (clique droit, enregistrer la cible du lien sous).

La première étape est d'écrire le code du menu en xHTML, nous utiliserons une liste ul étant donné qu'un menu est une liste d'item.

Bien qu'utilisant des images, notre menu doit rester utilisable et compréhensible sans les images, d'où l'importance de mettre dans les li l'intitulé des éléments du menu. Il va néanmoins falloir les cacher pour qu'ils n'apparaissent pas sur nos images.

Pour finir la partie xHTML, il va falloir que notre menu soit cliquable, nous allons donc rajouter des liens avec un id pour leur donner du CSS.

Occupons nous maintenant du CSS. La première chose est de supprimer le style lié à la balise ul (les puces et marges) et de définir notre classe cache. Ensuite pour positionner les items du menu côte à côte, il suffit de mettre à chaque li un float left.

Les liens sont des balises inline, c'est pourquoi nous allons définir l'élément de type block, indiquer sa taille (qui correspond à celle de l'image), pour ensuite lui mettre une image de fond.

La prochaine étape est de définir via le CSS, un changement d'image de fond lorsque la souris passe sur un item du menu. Il existe pour cela la propriété hover. Elle ne marche sous IE qu'avec les balises liens, d'où l'intérêt de définir ici les id du menu sur les a et non les li.

Notre menu semble fini, mais si vous uploader sur un serveur le résultat vous vous rendrez compte d'un effet désagrable lorsque l'on passe la souris sur le menu. L'image du survol n'est pas chargée, il se passe un temps avant qu'elle s'affiche. Pour résoudre ce problème, il faut précharger vos images de survol.

Préchargement des images

Jusqu'à présent la seule technique de préchargement que je connaissais, consistait à utiliser du Javascript. Cela m'a toujours paru compliqué pour pas grand chose. Heureusement j'ai découvert récemment une technique très facile via le xHTML.

Il suffit de rajouter au début de notre page xHTML entre les balises body, les images que l'on veut précharger en les cachant.

Ainsi lorsque vous passerez sur le menu, il n'y aura plus l'effet indésirable de l'image non chargée.

Les derniers articles de la catégorie : Programmation

• Mes logiciels pour le développement web
• Le choix d'une technologie
• Zend Framework
• Tuto : système de vote Ajax via Mootools
• Tuto PHP : couper une chaîne fin d'un mot
• IE 6 enfin accessible sous Windows Vista
• Un site web valide W3C ne prouve rien ...