 Retrouvez cet article dans : Linux Pratique 41
Dans ce didacticiel, nous allons créer un menu original et coloré, que l'on pourra placer sur une page d'accueil vierge de tout autre contenu par exemple. Pour ce menu graphique, nous allons utilisé une méthode assez proche de la technique des portes coulissantes (vue dans Linux Pratique n°32). Tout va reposer sur l'utilisation de deux images d'arrière-plan...
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 400x309 px, ce sont donc les mêmes dimensions que l'on définit pour notre conteneur " menu ". En arrière-plan, nous utilisons l'image créée au préalable, version noir
et blanc.
Enfin, les mentions de marges extérieures (margin) et intérieures (padding) sont à adapter à vos propres besoins (padding fixé à 0 pour supprimer les éventuelles marges intérieures définies par défaut pour certains navigateurs).
Venons-en aux différents items de la liste. Ceux-ci sont positionnés nécessairement en absolu, de manière à ce qu'ils se placent par rapport au dernier parent positionné (soit le conteneur " menu ") et à l'emplacement exact que nous aurons défini. Et, comme souvent, nous supprimons les puces à l'aide de la mention list-style: none;
#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 left et top, puis width et height. Rien de bien compliqué, il faut juste ne pas se tromper dans ses calculs...
Autre étape indispensable : déclarer une hauteur adéquate pour chacun des sélecteurs <a> (on affecte évidemment ici la hauteur de la zone de l'image correspondante, logique...).
#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 top et left vues plus haut. Sinon, les bulles grises et colorées ne se superposent pas parfaitement (voir schéma Fig. 4).
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
