Tutoriel carte cliquable avec the gimp ( image map )

Nous allons réaliser très simplement une carte cliquable avec gimp. Une carte cliquable ou image map est une image dont certaines zones présentent des liens vers une image , un texte, une carte etc... Une image cliquable permet ainsi de presenter facilement des statistiques, des photos, des cartes...

Ce tutorial peut vous paraitre long mais c’est parce qu’il est très détaillé. Ainsi même si vous ne maîtrisez pas ce logiciel vous pourrez tout a fait realiser une image map .

Dans cet exemple, nous allons realiser une image cliquable tres simple qui permettra de cliquer sur le nord ou le sud d’un departement.L’image de départ : carte-cliquable



En cliquant sur le nord on aura cette image : carte-cliquable-nord



et sur le sud : carte-cliquable-sud



Passons à la pratique : Tout d’abord, il faut mettre les différentes images dans le même dossier (plus pratique pour les chemins vers les images). On ouvre d’abord l’image qui servira au fond de l’image map avec gimp. On lance l’interface de creation d’image cliquable par filtre->web->image-cliquable(imagemap).

On obtient alors une nouvelle interface sur laquelle on va pouvoir definir les differentes zones de notre image. A gauche il y a les outils pour creer les zones cliquables (circulaire, rectangulaire ou polygone). outil-zone-cliquable



Comme on souhaite rendre cliquable le nord et le sud et que ce ne sont pas des formes simples , on va faire un tracé par polygone. On selectionne donc l’outil "definir une zone polygonale" et on clique le long de la zone à definir. Lorsque l’on a fini de faire le contour de la zone, il faut faire un double clic (sur le dernier point) pour obtenir une boite de dialogue dans laquelle on va pouvoir mettre le lien vers l’image qui doit être affichée quand on clique sur la zone : boite zone cliquable



On valide, la boite de dialogue précedente montre à droite le lien correspondant à la première zone cliquable :


On selectionne à nouveau l’outil polygone pour creer la seconde zone. Une fois la zone définit et le lien sur la deuxieme image ajouté on obtient bien deux zones qui pointent vers nos deux images :


Maintenant que les zones et les liens sont faits, il ne reste qu’a generer le code html de l’image map. Pour ça on peut enregistrer le document en faisant fichier->enregistrer-sous (dans la boite de dialogue où on a définit les zones).


Comme type de fichier on peut choisir html, on aura ainsi une page html generée automatiquement avec la carte cliquable et les liens vers les deux images. Aussi, il faut enregistrer le fichier dans le même dossier que les images pour que les liens que l’on a fait restent corrects.

Vous pouvez visualiser le résultat en cliquant sur ce lien : Le resultat n’est pas superbe (mais fonctionne parfaitement !) car les cartes ont été decoupées rapidement pour l’exemple :

carte cliquable

Integrer l’image à votre page web :

Si vous voulez integrer l’image à une page web deja existante, il faut recuperer le code de la page html pour l’integrer à votre page. Il suffit d’ouvrir la page html avec un editeur de texte, selectionner le code pour le placer là ou vous le désirez. Il ne vous reste alors qu’a verifier si les liens vers les images des zones cliquables sont encore bons. Si il ne le sont plus, il suffit de remettre les chemins (vers les images) corrects.

Quelques remarques sur le code :

Le code est d’abord composé des balises permettant l’affichage de l’image du fond (balise img src). On trouve ensuite la balise qui "ouvre" la zone cliquable. On retrouve alors les deux lignes qui correspondent aux deux zones cliquables avec les liens vers lesquels elles pointent (area shape). On trouve enfin la balise qui ferme la zone cliquable.

Pour finir :

** pour cet exemple on a fait des zones polygonales, c’est le plus dur à faire, les autres zones fonctionnent de la même façon sauf que la creation des zones cliquables est beaucoup plus facile.

** Vous pouvez definir autant de zones que vous voulez et melanger les types de zones (circulaires rectangulaires...)