Affinity-web`Blog

L'actu AW au quotidien

 

06

Fév 08

Tuto: menu rollover et preload des images

Posté à 11:10 par eMeRiKa - Catégorie 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.

<ul id="menu"> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul>

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.

<ul id="menu"> <li><span class="cache">Menu1</span></li> <li><span class="cache">Menu2</span></li> <li><span class="cache">Menu3</span></li> </ul>

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.

<ul id="menu"> <li><a id="menu1" href="#nogo"><span class="cache">Menu1</span></a></li> <li><a id="menu2" href="#nogo"><span class="cache">Menu2</span></a></li> <li><a id="menu3" href="#nogo"><span class="cache">Menu3</span></a></li> </ul>

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.

<img class="cache" src="menu1_over.jpg" alt="" /> <img class="cache" src="menu2_over.jpg" alt="" /> <img class="cache" src="menu3_over.jpg" alt="" />

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 8530 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 192è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 192è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 192ème commentaire

très bon tuto, merci !

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

 

* Pseudo :

* Email : (Non affiché)

Site web :

* Message :

135 articles dans la base de données

Archives ...

 

bonjour moi je connais une adresse mail contact francophone oiu on peut commander s ...

Posté par seb le 11/08/10 à 22:24 sur l'article Acheter ses cigarettes sur internet

bonjour ou on peut acheté des clop en ligne

Posté par nana le 08/08/10 à 16:40 sur l'article Acheter ses cigarettes sur internet

Pour la livraison je compte 2 semaines J'y suis depuis quelques temps je oeux vous ...

Posté par jean le 07/06/10 à 08:39 sur l'article Acheter ses cigarettes sur internet

Seite ist im Aufbau

Posté par extrem le 28/05/10 à 13:11 sur l'article Digipresse en ligne

Cigarettes bon marché en ligne Cigarettes bon marché - Les cigaret ...

Posté par 561zeevwi le 03/05/10 à 12:37 sur l'article Acheter ses cigarettes sur internet

Bonjour tout le monde, Merci eMeRiKa pour ce tuto très clair, mais j'aimerai ...

Posté par spykoN le 30/04/10 à 10:45 sur l'article Tutorial : Ajax avec Prototype

Je ne trouve pas de référence à FF comme le principal concurre ...

Posté par eMeRiKa le 18/04/10 à 18:27 sur l'article Google Chrome

Je ne suis pas d'accord sur le fait que Firefox soit le principal concurrent de Chr ...

Posté par Tof le 17/04/10 à 00:51 sur l'article Google Chrome

664 commentaires dans la base de données

S'abonner au flux Rss

 

Singstar : une love story qui sonne faux

Il faut faut Flash pour voir l'animation

Clip the parachute ending - Birdy Nam Nam


BIRDY NAM NAM - THE PARACHUTE ENDING Clip Officiel
par Has_Been

Google Street View Slow motion

Il faut faut Flash pour voir l'animation

Cat Shower 2

Il faut faut Flash pour voir l'animation

Wii Kebab

Il faut faut Flash pour voir l'animation

Le Jour du Permis - Facebook

Il faut faut Flash pour voir l'animation
 
LinkedIn
deviantart
Twitter
 
  • RT @blozie: Facebook adopte le modèle d?influence de Twitter tinyurl.com/27qf47p...
  • @bJonathan merci pour le rt:)
  • @startupz ça c'est du FF, merci
  • sympa la campagne du SELL sur les jeux violents http://bit.ly/aW4HS4
  • #FF @clmntlxndr @XavierRapido @VincentGarreau @startupz
 

 

 

Chargement en cours!