Comment créer une carte cliquable html/Gimp

Comment créer une carte cliquable html/Gimp

Pour créer une carte cliquable il y a parmi toutes les solutions proposées, deux qui sont interessantes : avec le logiciel Gimp ou avec le format SVG.Ici nous allons d’abord voir la première méthode

La methode GIMP

il faut au préalable se trouver une image jpg ou png et telecharger le logiciel Gimp. Ouvrez Gimp, et faite ‘fichier’ / ‘ouvrir’. Une fois l’image ouverte, cliquez sur Filtres/web/image cliquable web.

gimp

Une nouvelle fenêtre s’ouvre. C’est la que vous allez travailler. Vous choissisez le polygone sur la gauche de la fenetre, et vous commencez à tracer les points qui constituront les contours de chaque partie de l’image (ou carte). A chaque clic de souris, le tracé marque un repère. Vous avancez comme ca au clic, en faisant le contour de chaque zone sur laquelle vous voulez affecter un lien.

gimp2

Une fois le tour de l’image tracé, en revenant au point de départ on double click, et une nouvelle fenêtre s’ouvre :

gimp4

Ici on insère le lien (url) que l’on veut rattacher à la zone définie par notre tracé.

On valide et on continue le tracé de chaque zone, en répétant l’opération. On termine une zone, on double clique, on enregistre nos différents url correspondants à chaque zone définie.

gimp5

Une fois toutes les zones crées, on va sur « Affichage » puis « Sources »:

gimp3

Et là Gimp nous livre le code html à insérer dans index.html index.php ou tout autre endroit où vous voulez faire apparaitre votre carte.

gimp6

Entre les balises « map » vous aurez les coordonnées pour chaque zone définie au préalable sur  la carte. Ici, pour la carte d’Ile de france, j’aurais donc 8 zones(regardez la carte), donc 8 lignes <area shape..>

Ce code on le copie et on le colle sur sa page html.

Dans la première ligne <img src =.. On place l’url de notre image d’origine jpg ou png. Quand on lance le navigateur, on voit donc bien sa carte, et au survol, la souris se transforme en petite main, signe que vous pouvez desormais cliquer sur chaque partie de la carte pour laquelle vous avez défini un lien (url).

La technique n’est pas vraiment  clean puisque sur votre image quand vous cliquez sur une zone, le contour défini avec GIMP ressort : si comme ici votre image a déjà des zones dessinées à l’origine, on verra donc le contour bleu de gimp se superposer aux contour du dessin; si votre contour tracé etait approximatif , ca ne sera pas tres esthétique.

Ici dans ma page html, je fais appel à la librairie jquery.maplight.min.js que l’on trouve facilement sur le net. Cela permet de mettre en surbrillance les zones survollées à la souris.

Voila pour la première technique. Normalement, si tout était clair vous avez votre petite carte cliquable !

10 commentaires sur “Comment créer une carte cliquable html/Gimp

  1. Micofo

    Juste un grand pour ce travail, assez explicite. En suivant toutes les etapes à la lettre tout marche.
    Vosu m’avez sauvez un projet.

    Encore grand merci et Courage

  2. yuyazz

    Merci ca fait plaisir à lire!!!content que ca aie pu t’aider, comme d’autres ont pu m’aider grace à leur tuto..vive la transmission et l’open source!!!
    a bientot, merci à toi et bons projets!!!

  3. ndiaye ousseynou

    Bien comment faire un test avant de passer a l’insertion sur le site web

  4. yuyazz

    Bonjour, j’ai peur de ne pas avoir bien saisi la question, mais pour tout test avant mise en ligne, il faut l’effectuer sur un environnement de test, en local, et dans ce cas précis, sur des simple page html css js sur notepad ++ par exemple!

  5. Lino

    Bonjour,
    je débute dans le domaine. J’ai bien retracé une zone et pu y adjoindre un lien. J’ai ajouté un texte dans mouseover mais au rendu, celui ci n’apparait pas ?
    Pouvez vous m’aider ?
    Merci,
    Lino

  6. copier coller Auteur de l'article

    Pour afficher un texte au survol d’une zone, pour indiquer le nom d’une ville par exemple, vous pouvez ajouter le « title » dans la balise

    ..du style

    Après il y a sans doute des possibilités via gimp que je n’ai pas exploré..il faudra voir du coté du logiciel gimp

  7. toto

    bonjour,
    tout d’abord merci pour se tuto.
    jai tout de même un soucis, un fois le code html mis sur ma page, cela m’affiche juste un carré transparent avec une image en haut a gauche comme si l’image n’est pas pris en charge (.png) par contre si je met l’image de ma carte de base sur ma page j’ai une double image (une cliquable et l’autre non)….je ne comprend pas pourquoi

  8. Sara

    Bonjour,

    Merci pour ce travail! Pour ma part je souhaiterai que ce soit des points qui soient cliquables, c’est également possible avec gimp?

  9. copier coller Auteur de l'article

    Bonjour, en principe on doit pouvoir tracer des points sur la carte au lieu de tracer des zones..le risque étant que ceux ci soient trop petits et peu pratiques pour l’utilisateur..

  10. copier coller Auteur de l'article

    Bonjour je ne peux malheureusement pas répondre comme ca, sans visu, n’ayant pas moi même rencontré ce problème.ca doit etre un problème dans le code ou lors du déroulement des étapes dans Gimp..

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.