Affinity-web`Blog

L'actu AW au quotidien

Févr 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 3673 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 128^è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 128^è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 22^è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 128^è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

Traçabilité, la voie du futur

22 Sept 08

Concours : Very Nice Blog #1

20 Sept 08

Back to the roots

11 Sept 08

Chrome : le navigateur qui vous épie

03 Sept 08

Portfolio : Redesign Live-session.fr

01 Sept 08

Advancia EIEJE 2008

07 Août 08

Webdesign : le 1000 s'accroche

30 Juil 08

Blog : 1 an !

20 Juil 08

92 articles dans la base de données

Archives ...

Idem pour le coup de coeur :) L'idéal serait de virer le CD et les tutos ...

Posté par eMeRiKa le 05/10/08 à 12:24 sur l'article Advanced Web : avis sur le magazine

Je suis totalement avec toi ! Si vous faîtes vous-même votre veille per ...

Posté par VuThé le 05/10/08 à 12:10 sur l'article Advanced Web : avis sur le magazine

Quelle réussite ce site ! Beaucoup de retours positifs. Merci pour votre e ...

Posté par Laurent le 02/10/08 à 09:24 sur l'article Portfolio : Redesign Live-session.fr

con mis deseos màs sinceros de felcidad paz y hienestar jamaj

Posté par jamaj le 01/10/08 à 20:02 sur l'article Miro, le Firefox de la vidéo

je l'ai trouve exelent comme design vraiment parfait

Posté par tutoriaux photoshop le 30/09/08 à 04:05 sur l'article Concours : Very Nice Blog #1

Dans ce cas, il faut concevoir deux sites : l'un classique et l'autre dédi&e ...

Posté par eMeRiKa le 29/09/08 à 22:44 sur l'article Webdesign : le 1000 s'accroche

Salut ! ... C'est sexy sa ... Pouvez-vous m'envoyer des photos sexy comme sa SVP .. ...

Posté par Etienne le 29/09/08 à 21:44 sur l'article Britney Spears, la puissance de photoshop

Oui, mais alors quid des téléphones portables et autres iphone ou bla ...

Posté par jigece le 29/09/08 à 12:53 sur l'article Webdesign : le 1000 s'accroche

404 commentaires dans la base de données

I'm a PC (par Steve Ballmer PDG Microsoft)

Sticky Note Experiment - Eepybird

Nouvelle pub Lego

Nils Inne painting and skateboarding

Les 10 phrases que les femmes ne diront jamais

Surprise (via O'SteEL)

@OSteEL c'est organisé par ma prof !
Va visiter les jardins de l'innovation d'orange Labs Grenoble cette après midi !
rha tjs aussi tordant ce site.
"Aujourd'hui, ma copine a acheté deux billets à 70 ? chacun pour un concert de Bob Marley qui devrait avoir lieu dans 15 jours. VDM "
Il neige sur Mars tinyurl.com/3sl83q... ! Youpi quand on aura assez salopé la Terre, on pourra pourrir Mars.

Chargement en cours!