|
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
.....
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 ... ;)
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..
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
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>
Et
voici le résultat ! il suffit de cliquer sur l'une des
lettres pour être réorienté ...
|
|
|