Image Map pour fainéant ... et pour Gimp

Si mon tutoriel vous a plu merci de mettre un petit mot dans mon livre d'or ;)
Si vous désirez une bannière, une "userbar" une signature ou tout autre travail c'est par là.

ooOoo

Ayant dèjà fait un tuto sur l'image Map pour photoshop, je ne pouvais pas faire autrement que d'en faire un pour Gimp (à tout seigneur tout honneur)...

Prêt  ? c'est parti .........  mon kiki .....

Etape 1
Rentrons dans le vif du sujet.
Ouvrez votre image ou photo dans Gimp, redimensionner la à la taille voulue (éviter que ce ne soit trop lourd).
Une fois fait, aller dans Filtre --> Web --> Image cliquable Web



Et maintenant armez vous de patience ... ;)
   

Etape n°2
Maintenant il va falloir déterminer les zones « cliquable ».
A l'aide de l'outil polygone (3° figure bleue à gauche) faites le tour des éléments que vous désirez déterminer comme zone « cliquable », ...  (faites un zoom pour être plus précis)

  

Votre zone sélectionnée il suffit d'effectuer un double clic pour ouvrir la fenêtre suivante afin d'y entrer le lien du site sur lequel vous désirez renvoyer votre sélection.



Sélectionner "Site Web" (si c'est un site) puis entrer votre lien dans la partie URL et terminer par valider..

Etape n°3
Vous pouvez revenir sur une sélection afin de modifier la zone de couverture, pour ce faire il suffit de cliquer sur la flêche se trouvant à gauche (au dessus des formes géométriques) ensuite cliquer sur la zone dont vous désirez modifier la forme, puis sélectionner le rectangle rouge et en maintenant le bouton gauche de la souris enfoncé, déplacer le à votre convenance.



Il est également possible de supprimer un point (ou d'en ajouter) pour ce faire il suffit de cliquer sur le rectangle qu'on désire supprimer et sans bouger la souris repérer les coordonnées qui se trouvent en bas de la fenêtre ou vous avez deux nombres séparés par une virgule (ici 133, 198).
Ensuite allez cliquer sur le petit "bloc note avé le stylo" se trouvant à gauche, la fenêtre paramètre devrait s'ouvrir (la même que tout à l'heure où nous avons inséré l'url de notre site).
Là il faut cliquer sur l'onglet "Polygone" ensuite repérer la ligne dont les nombres se rapprochent le plus des coordonnées relevées précédemment.
Il ne reste plus alors  qu'à supprimer la ligne en cliquant sur ...  devinez  ;)






Etape n°4
Maintenant allez dans :
Cartographie --> Editer l'information de la carte.
Dans le nouvelle fenêtre, modifier le nom de l'auteur si nécessaire puis sélectionner CSIM et terminez en cliquant sur "Valider".


Ici vous avez deux possibilités pour récupérer le code.

1) En allant dans affichage --> source vous faites un copier de ce que vous trouverez dans la fenêtre et le coller dans votre page web.



2) Fichier --> Enregistrer sous, là vous aurez un fichier de type monnomfichier.gif.map qu'il suffira d'ouvrir avec notepad (ou tout autre éditeur) afin d'en tirer la "substantifique moelle".

Dont le code ressemblera à ceci ...
Vous pouvez supprimer tout ce qui commence par <!-- et termine par --> , ce ne sont que des commentaires.

<img src="zoneclic.gif" width="550" height="344" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Golumfr -->
<area shape="poly" coords="177,184,171,177,168,177,157,176,142,181,133,198,137,220,148,226,159,229,
174,226,182,216,183,207,180,197,169,199,157,199,159,207,169,208,167,214,157,217,
148,209,147,198,150,190,160,190,164,190,178,187" href="http://www.golumfr.com" />
<area shape="poly" coords="238,156,251,203,287,195,283,185,262,188,252,152,238,157" href="http://www.golumfr.com" />
<area shape="poly" coords="280,146,288,180,303,191,324,185,334,174,332,155,325,133,310,138,319,169,
315,174,306,175,295,142,278,146" href="http://www.golumfr.com" />
<area shape="poly" coords="334,132,345,178,360,175,350,143,368,174,379,170,379,135,389,170,401,163,
388,118,369,122,370,152,353,124,333,133" href="http://www.golumfr.com" />
<area shape="poly" coords="422,158,415,133,420,134,421,134,418,125,413,122,412,117,415,117,418,117,
419,106,405,110,397,118,398,126,395,131,398,138,403,138,408,162,421,158,422,158" href="http://www.golumfr.com" />
<area shape="poly" coords="431,156,446,153,442,132,444,126,452,125,453,116,450,114,443,114,438,118,
438,120,435,114,423,118,431,156" href="http://www.golumfr.com" />
<area shape="poly" coords="202,180,201,190,208,201,218,201,224,191,221,179,212,174,212,161,227,166,
238,183,239,201,228,213,210,216,198,210,188,197,187,180,197,166,212,160,212,176" href="http://www.golumfr.com" />
</map>


Etape n°5
Et voici le résultat !  il suffit de cliquer sur l'une des lettres pour être réorienté ...








ver 1.