Créer une image map : Plusieurs liens dans une image
Cela ouvre beaucoup d'horizon, pour ceux qui savent faire du graphisme et code en html. Les deux ici sont concilié.
Cela est et reste relativement simple, si vous suivez bien les indications qui vont suivre. On va faire un menu tout simple de 4 lien ! Je vous montrerais deux menu différent.
Commençons :
J'ai donc créer mon menu en fond transparent en png (le format GIF lui aussi est valable) et je suis sous UPI 10 (PhotoImpact). Vous pouvez bien sur faire avec un autre logiciel, comme Photofiltre, Toshop, ImageReady voir même Gimp ! Ou celui que vous avez ...
Voici mon menu image:
Trouver les coordonnées de chacune des zones :
Commencer par ouvrir un bloc note, vous en aurez besoin plus tard... Sous upi en fait, c'est assez simple:
- J'ai fusionné l'image par le clic droit (Fusionner tout...)
- comme sur l'image ci-dessous, je sélectionne : l'Outil de Sélection Standard [M] (en rouge sur l'image)
- Créer la zone de sélection sur l'image qui sera attribué ensuite au lien.
Ensuite regarder en bas de la fenêtre du logiciel ( la zone verte)
Vous voyez les coordonnées de la première sélection: (29,90)-(153,119)
On va les noter sous cette forme: 29,90,153,119 ( dans le bloc-note).
Il vous faudra réitérer l'opération pour chaque zone.
Pour mon menu, les coordonnées précises de chaque zone sont :
zones | |
Site | 19,91,158,119 |
Blog | 22,135,152,168 |
Post-iT | 13,179,156,207 |
WebGalerie | 14,225,159,253 |
A ce stade il vous faut héberger votre image, vous pouvez choisir :
- de l'héberger en cliquant sur Flickr
- ou de l'héberger en cliquant sur Imageshack
Je passe à l'étape suivante :
Voilà le code vierge, que vous allez personnaliser.
Code HTML :
<img border="0" alt="texte au survol de la souris" src="" usemap="#nom du Map" > <map id="nom Map" name="nom Map "> <area shape="rect" href="/wiki/URL 1" coords="11,9,193,112" alt="Nom lien 1" > <area shape="rect" href="/wiki/URL 2" coords="13,150,194,250" alt="Nom lien 2" > <area shape="rect" href="/wiki/URL3" coords="11,290,193,393" alt="Nom lien 3" > <area shape="rect" href="/wiki/URL4" coords="11,290,193,393" alt="Nom lien 4" > </map>
Pour moi cela donne cela :
Code HTML :
<img border="0" alt="Menu CsN" src="http://membres.csn.free.fr/Images/menu-csn-mapping.gif" usemap="#Menu" border="0"> <map id="Menu" name="Menu"> <area shape="rect"href="/accueil/index.php" coords="19,91,158,119" alt="Accueil" > <area shape="rect" href="/blog/blog.php" coords="22,135,152,168" alt="Mon blog"> <area shape="rect" href="http://post-it.easy-design.net/" coords="13,179,156,207" alt="Des gif !!!"> <area shape="rect" href="http://webgalerie.easy-design.net/" coords="14,225,159,253" alt="Des wallpapers" > </map>
Résultat:
Bonus:
Si vous mettez plusieur menu sur une même page, n'oubliez pas de numéroter vos menus:
Code HTML :
Les gifs animés sont bien entendu plus jolis. A vous de jouer maintenant...