Réaliser une image cliquable avec the Gimp

Oussama Hammami, 2009-11-23

Switzernet

L'intérêt de ce document est de pouvoir facilement définir des zones cliquables sur une image, chaque zone portant un lien vers une autre page web, vers un fichier hébergé sur internet etc.

Pour commencer, il faut avoir The Gimp [gimp-win.sourceforge.net].

Ensuite, il suffit d'ouvrir l'image sur laquelle on souhaite définir des zones cliquables avec The Gimp puis d'aller dans le menu [ Filters > Web > Image Map... ]

Il est alors possible d'utiliser une sélection rectangulaire, circulaire ou polygonale pour définir les zones cliquables.

Une fois la zone cliquable définie à l'aide de l'outil de sélection de son choix, il suffit de double-cliquer pour qu'une boite de dialogue s'ouvre. Remplir le champ url avec l'url absolue de la page web, de l'image ou du fichier à mettre en lien sur cette zone cliquable.
Recommencer avec les autres zones cliquables à définir.

Une fois que c'est terminé, aller dans menu, enregistrer sous et enregistrer votre image cliquable au format html sur votre ordinateur
Ouvrez votre fichier html avec un éditeur de texte (du type Note-Pad sous windows) , vous avez un contenu de ce type :

<img src="maps.png" width="587" height="392" border="0" usemap="#map" />

<map name="map">

<area shape="poly" coords="172,63,150,58,132,90,156,93,75,161,76,183,207,88,192,95,166,81,168,61" href="http://URL 1/" />

<area shape="poly" coords="103,179,78,190,68,189,65,206,69,226,87,219,106,209,116,209,115,195,113,186" href="http://URL 2/" />

. . .

</map>

Pour que cette image cliquable soit visible par tous, il faut que l'image qui a été utilisée pour créer cette image cliquable soit hébergée sur internet et il faut remplacer au début du code html maps.png par l'url de l'image hébergée.
Ensuite, il n'y a plus qu'à coller ce code HTML dans un article ou un module texte libre.

Voici un exemple d'image cliquable : [032, 024, 021, 026 sont cliquables]