 Retrouvez cet article dans : Linux Pratique 41
Le principe
Notre menu sera composé de 5 grosses bulles (une pour chaque entrée du menu), qui seront des liens vers les différentes pages du site Web. Ce menu apparaîtra en noir et blanc, mais au passage de la souris sur chacune des bulles, celles-ci apparaîtront en couleur. Tout ce dont nous avons besoin au départ, et c'est sans doute la partie la plus fastidieuse de ce didacticiel, c'est de deux images similaires, l'une en noir et blanc, l'autre en couleur. Voici celles que nous avons réalisées à l'aide du logiciel de dessin vectoriel Inkscape : -> Fichiers testés sous Firefox 2.0 et Internet Explorer 7.0
Fig.1 - Fig.2
Commencez par créer votre image en couleurs, puis à l'aide du logiciel de retouche d'images de votre choix, appliquez un filtre noir et blanc pour obtenir la seconde image. Mais vous pouvez également choisir une toute autre image... L'important est que les images aient les mêmes dimensions et possèdent toutes les deux, autant d'éléments qui pourront faire office d'entrées de menu.Le code HTML
Rien de vraiment compliqué ici. Notre menu va être déclaré comme une liste non ordonnée, dont chaque élément sera constitué d'une partie de l'image (c'est pourquoi on leur attribue à tous un identifiant) et sera un lien.<body> <ul id="menu"> <li id="menu1"><a href="#"></a></li> <li id="menu2"><a href="#"></a></li> <li id="menu3"><a href="#"></a></li> <li id="menu4"><a href="#"></a></li> <li id="menu5"><a href="#"></a></li> </ul> </body>
 La feuille de styles
Toute l'astuce va résider, comme bien souvent, dans la feuille de styles. Observons tout d'abord les propriétés qui définissent le menu dans son ensemble :#menu {
position: relative;
width: 400px;
height: 309px;
margin: 10px auto;
padding: 0;
background: url(menu_gris.png);
}
Tout d'abord, le menu est positionné en relatif. Cette mention est très importante, car, sans elle, notre menu ne fonctionnerait pas comme nous le souhaiterions. En effet, par défaut, les navigateurs affichent les conteneurs d'un document HTML dans l'ordre du flux normal. En position relative, un élément pourra être décalé verticalement et/ou horizontalement. Le contenu suivant n'est pas affecté par ce déplacement, ce qui permet des chevauchements par exemple. Cette propriété nous est donc très utile pour effectuer notre menu, puisque la réalisation de celui-ci repose sur une superposition et un décalage d'images.
Notre image a pour dimensions exactes #menu li {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
}
#menu a {
display: block;
}
Le sélecteur a reçoit la mention display:block; car, par défaut, les éléments <a> sont des éléments de type en-ligne (voir Linux Pratique n°38). On pourra ainsi doter les éléments <a> de caractéristiques de hauteur, qui sont normalement destinées aux éléments de type bloc.
Reste le plus délicat, la déclaration des différentes " zones cliquables " de l'image. Il s'agit ici de découper notre image de départ en autant de zones que d'entrées du menu (ici 5). Pour que vous puissiez mieux étudier la délimitation des zones, nous avons attribué une bordure noire pointillée à chaque zone, pour effectuer la capture que vous pouvez observer (Fig. 3).
 Fig. 3 : Observez ici les zones que nous avons délimitées pour chaque entrée du menu.
#menu1 {left: 18px; top: 0px; width: 152px; height: 135px;}
#menu2 {left: 190px; top: 15px; width: 130px; height: 121px;}
#menu3 {left: 135px; top: 135px; width: 98px; height: 98px;}
#menu4 {left: 0px; top: 180px; width: 129px; height: 129px;}
#menu5 {left: 247px; top: 168px; width: 153px; height: 141px;}
Ainsi, dans un logiciel de retouche d'images (ex. : The Gimp), nous " découpons " une zone pour chaque bulle (notez que ces zones ne sont pas nécessairement de dimensions identiques...). Dans votre logiciel de retouche d'image, notez bien les coordonnées du point supérieur gauche et du coin inférieur droit de chaque zone, qui vous permettront respectivement de donner une valeur aux propriétés #menu1 a {height: 135px;}
#menu2 a {height: 121px;}
#menu3 a {height: 98px;}
#menu4 a {height: 129px;}
#menu5 a {height: 141px;}
Enfin, il ne nous reste plus qu'à faire en sorte qu'au passage de la souris sur l'une des zones prédéfinies, ce soit la zone correspondante de l'image colorée
qui apparaisse.
Pour cela, chaque zone reçoit l'image colorée en arrière-plan, et seule la zone qui nous intéresse sera visible. Pourquoi ? Car nous avons fait en sorte de donner les dimensions adéquates à chaque conteneur menu1, menu2, etc.
En outre, il faut veiller ici à décaler l'image colorée d'arrière-plan, de distances équivalentes aux valeurs 
Fig. 4 : À gauche : la première zone (d'identifiant " menu1 ") est décalée de 18 px par rapport au bord gauche de l'image (left: 18px;). À droite : l'image colorée d'arrière-plan va venir se coller au cadre de la zone (en rouge sur la figure). Il est donc nécessaire de la décaler de 18 px, mais dans l'autre sens (soit -18px).
#menu1 a:hover {background: url(menu_color.png) -18px 0px no-repeat;}
#menu2 a:hover {background: url(menu_color.png) -190px -15px no-repeat;}
#menu3 a:hover {background: url(menu_color.png) -135px -135px no-repeat;}
#menu4 a:hover {background: url(menu_color.png) 0px -180px no-repeat;}
#menu5 a:hover {background: url(menu_color.png) -247px -168px no-repeat;}
Et voilà , notre menu est maintenant terminé. Au passage de la souris, les bulles s'illuminent (Fig. 5) !
Fig. 5
 Retrouvez cet article dans : Linux Pratique 41
Donnez votre avis
Vous devez avoir ouvert une session pour écrire un commentaire.