Créer une image map : Plusieurs liens dans une image
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 coder en html. Les deux ici sont conciliés.
Cela est et reste relativement simple, si vous suivez bien les indications qui vont suivre. On va faire un menu tout simple de 4 liens ! Je vous montrerais deux menus différents.
J'ai donc créé 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 ...
Commencez 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ée ensuite au lien.
Ensuite regardez 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.
A ce stade il vous faut héberger votre image, vous pouvez choisir :
Voilà le code vierge, que vous allez personnaliser.
Pour moi cela donne cela :
Si vous mettez plusieur menu sur une même page, n'oubliez pas de numéroter vos menus:
Les gifs animés sont bien entendu plus jolis. A vous de jouer maintenant...
Cela ouvre beaucoup d'horizon, pour ceux qui savent faire du graphisme et coder en html. Les deux ici sont conciliés.
Cela est et reste relativement simple, si vous suivez bien les indications qui vont suivre. On va faire un menu tout simple de 4 liens ! Je vous montrerais deux menus différents.
Commençons :
J'ai donc créé 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 :
Commencez 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ée ensuite au lien.
Ensuite regardez 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...