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 7728 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 191è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 191è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 191è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 :

133 articles dans la base de données

Archives ...

 

Bonjour, Je pense que la constante de tous ces sites est bien le design ép ...

Posté par France Montagne été le 08/03/10 à 12:59 sur l'article Comparaison de 13 sites webs marchands

Je rejoins Neostng, les communqiués qu'on m'envoie sont BOF ! et quand ils s ...

Posté par weetabix le 02/03/10 à 01:32 sur l'article Les communiqués de presse 2.0

Je suis totalement d'accord avec toi NeoSting, un communiqué comme tu le d&e ...

Posté par eMeRiKa le 20/02/10 à 15:04 sur l'article Les communiqués de presse 2.0

Enfin ! Faut avouer que les CM que je reçois, si je ne les relaye pas, c'est ...

Posté par NeoSting le 19/02/10 à 20:51 sur l'article Les communiqués de presse 2.0

Un site hyper pratique qui regroupe toutes les personnes influentes sur twitter en ...

Posté par Sophie le 13/01/10 à 12:07 sur l'article Twitter, pourquoi s'y mettre ?

Je pense aussi que google pense (et je pense pareil) que plus tard, tout sera sur l ...

Posté par Akah le 10/01/10 à 23:32 sur l'article Google Chrome

Pour moi c'est tout simple : Microsoft a été obligé de ne plus ...

Posté par thomas landru le 10/01/10 à 21:15 sur l'article Google Chrome

Google veut tout simplement économiser de l'argent (ou mieux dépenser ...

Posté par Guillaume Payre le 07/01/10 à 22:09 sur l'article Google Chrome

654 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 @sirchamallow: Avec Thibaud, 9 ans, la relève est assurée ! http://bit.ly/dqVfxP (framablog)
  • @gbertholet sympa la custom de Mailchimp
  • @arthurlacoste sur Grenoble tu as les soirées WIA http://bit.ly/pvwr pas que pour les entrepreneurs mais de très bonnes soirées
  • mais après avoir rentré le coupon j'ai aucun changement sur les tarifs... C'était trop beau
  • Voyages Sncf a envoyé une promo dans sa newsletter si on prend son billet depuis le mobile
 

 

 

Chargement en cours!