Affinity-web`Blog

L'actu AW au quotidien

Fév 08

Tuto: menu rollover et preload des images

Posté à 11:10 par eMeRiKa - Catégorie : Programmation

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.

#menu { list-style-type: none; /* supprimer les puces */ margin: 0; padding: 0; } .cache { display: none; } #menu li { 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.

#menu1 { display: block; background-image: url("menu1.jpg"); width: 57px; height: 30px; } #menu2 { display: block; background-image: url("menu2.jpg"); width: 61px; height: 30px; } #menu3 { display: block; background-image: url("menu3.jpg"); width: 57px; height: 30px; }

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.

#menu1:hover { background-image: url("menu1_over.jpg"); } #menu2:hover { background-image: url("menu2_over.jpg"); } #menu3:hover { background-image: url("menu3_over.jpg"); }

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

Lu 5988 fois

Article Précédent

Commentaires de cet article

Hello =)
Je veux pas dire mais le menu fonctionne pas :/ Les images au survol ne s'affichent pas ^^
Je dis ça je dis rien hein !

#1 Posté par deuns le 06/02/08 à 13:09, son 9^ème commentaire

hum, autant j'viens de regarder sous ie et ça merde, mais autant j'ai bien les images qui s'affichent !!

#2 Posté par eMeRiKa le 06/02/08 à 13:22, son 183^ème commentaire

Voilà bug IE corrigé, mais j'ai beau testé sous FF, IE, opéra le rollover marche parfaitement..

#3 Posté par eMeRiKa le 06/02/08 à 13:32, son 183^ème commentaire

Le but c'est de ne pas avoir de blanc lors du rollover avant que l'image correspondant à l'état "survolé" ne soit chargée ?

Si oui, il semble que ça le fait quand même lors du 1er rollover... mais après c'est nickel.

Sinon, il y a la technique (personnellement pompée sur alsacreation) qui consiste à avoir sur la même image et l'état normal, et l'état survolé du bouton, le rollover ayant pour effet de déplacer l'image, pour que soit visible tour à tour l'un ou l'autre des états (je crois que c'est la technique CCS Sprites ou un truc dans le genre, il me semble que tu en parles brièvement dans l'article faisant suite à la conf Paris Web 2007).

Les 2 états sont ainsi chargés dès l'initialisation de la page, et on n'a pas d'effet désagréable \o/

#4 Posté par OSteEL le 06/02/08 à 14:51, son 32^ème commentaire

Yep c'est la technique du CSS Sprite.

Cette technique marche niquel, après le serveur envoie 2images par bouton au lieu d'une ce qui est moins bien c'est sur, mais plus simple à mettre en place.

#5 Posté par eMeRiKa le 06/02/08 à 15:09, son 183^ème commentaire

très bon tuto, merci !

#6 Posté par grandpopo le 26/02/08 à 14:17, son 1^er commentaire

Article Précédent : eGame 4ème thème et béta privée

eGame, la v2 lancée

01 Juin 09

Design d'interface, la confiance aux tests ?

23 Mai 09

eGame, l'aventure continue

09 Mai 09

eGame, méthodologie de développement

22 Avril 09

Le choix d'une technologie

28 Mars 09

Apli Facebook : Slap your friends

21 Mars 09

Réalité augmentée : "the next big thing" ?

11 Mars 09

S'entourer pour créer

11 Mars 09

125 articles dans la base de données

Archives ...

Et ben tas pas à rougir le design est vraiment sympa digne d'un graphiste pr ...

Posté par Anto le 13/06/09 à 00:08 sur l'article eGame, la v2 lancée

Mon blog est inscrit dans wikio... parce que je pensais que ça aiderait au r ...

Posté par Coeur Noir le 07/06/09 à 14:23 sur l'article La guerre des blogs

@eMeRiKa Pas de soucis pour avoir utilisé mon tweet, c'est libre hein... M ...

Posté par clementcollier le 05/06/09 à 17:51 sur l'article La guerre des blogs

Bonjour, Je pense que l?on se trompe ici de cible. Je ne suis pas forcément ...

Posté par Benoit le 05/06/09 à 17:08 sur l'article La guerre des blogs

Je suis de ceux qui rigole de tous ces débats que provoque chaque moi ce nou ...

Posté par Anto le 05/06/09 à 16:35 sur l'article La guerre des blogs

Bien sûr, j'imagine que sur twitter vu le peu de place, c'était pas to ...

Posté par eMeRiKa le 05/06/09 à 14:47 sur l'article La guerre des blogs

Comme je suis l'auteur du "niaiseries", je vais m'expliquer... Certes, l ...

Posté par clementcollier le 05/06/09 à 14:29 sur l'article La guerre des blogs

Romain, ce qui est "amusant"" c'est que tu décides maintenant ...

Posté par weetabix le 05/06/09 à 14:00 sur l'article La guerre des blogs

609 commentaires dans la base de données

Qu'est-ce que Twitter ?

Les patrons sont des gens comme vous

Damien Walters 2009 | AWESOME Physical Skills

Création, Internet, et les réseaux décentralisés.

Entrepreneurs can change the world

Comment Lancer un Produit Avec Sa Communauté

soirée finie, se lève dans 3h pour partir aux #eurocks ! Chaud
Waho j'ai juste commencé le pdf de benjik, c'est méga flippant !
@clementcollier fini l'orage ici, allez dans 3/4h sur Paris :p
Inquiétant... RT @sirchamallow @newlimits La limite des énergies renouvelables: http://bit.ly/4qkDB
@regioneo le nacre qu'elles contiennent ?!

Chargement en cours!