Effets d'images

Créer une image map : Plusieurs liens dans une image

Cet article a été mis à jour, vous consultez ici une archive de cet article!

Une image map est une image sur laquelle on crée des liens. C'est essentiellement utilisé pour faire des menus, des cartes géographiques etc...
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 :

<img border="0" alt="Menu CsN" 
 
src="http://.../mapping-000.png" usemap="#Menu" border="0"> <map id="Menu" 
 
name="Menu">
<img border="0" alt="Menu CsN" 
 
src="http://.../mapping-001.png" usemap="#Menu1" border="0"> <map id="Menu1" 
 
name="Menu1">

Les gifs animés sont bien entendu plus jolis. A vous de jouer maintenant...