Créer une carte de france intéractive avec Gimp

Mer. 16 Oct. 2013
7 commentaires

Bonjour à tous,

Dernièrement, j'ai eu à créer une carte de France intéractive pour un site web, plus précisément pour un annuaire. Les boutiques devaient être reférencés par région, et pour rendre tout cela plus interactif, il a fallu créer une carte de France sur laquelle nous pouvions directement cliquer sur une région pour accéder au contenu de la catégorie.

Ni une , ni deux, Je me met à rechercher une manière simple de réaliser ceci, et à ce moment là je me souviens d'une option semblable que j'avais pu voir dans un logiciel que j'utilise très souvent, qui n'est autre que Gimp.

Sans plus attendre, je vous invite à le télécharger sur cette page, et nous allons commencer le tutoriel qui, vous allez le voir, n'à vraiment rien de bien compliqué !

Note: il existe plusieurs façons de réaliser une carte intéractive: Flash, HTML5, jquery etc... celle que je vous propose dans ce tutoriel est simple, sans fioriture et la réalisation est à la portée de tout le monde. Seul l'intégration à votre site web demande un minimum de connaissance en HTML.

1 er étape : Créer une carte de France

Pour commencer, et avant tout autres choses, il nous faut une image au format .jpg ou .png représentant la carte de France ! C'est sur cette image que nous allons poser les " coordonnées " permettant de créer un lien sur une zone précise de l'image.

Pour ma part, j'ai utilisé une image toute prête que j'ai simplifié, et que j'ai trouvé sur ce blog. Je remercie l'auteur pour son travail, qui d'ailleurs vous propose un tutoriel vidéo, afin de réaliser votre propre carte de France grâce au logiciel inkscape. Une bonne idée si vous avez besoin d'intégrer des éléments particuliers à votre carte.

Maintenant que vous avez votre carte ( image au format .jpg ou .png ) nous allons pouvoir passer à la partie suivante : la réalisation de notre carte intéractive :D

2 eme étape : Réalisation de la carte intéractive avec gimp

Lancez gimp et ouvrez votre image. Ensuite allez dans Filtres > Web > Image cliquable web. C'est grâce à ce greffon que nous allons pouvoir mettre en forme nos zones cliquables.

Pour faire un tour rapide de l'interface, La barre horizontal du haut propose les outils classiques d'édition ( copier, coller, zoom etc...). La barre vertical à gauche contient les outils nous permettant de réaliser une zone cliquable. Vous avez le choix entre entre plusieurs formes : cercle, rectangle et polygonale. C'est cette dernière qui va nous intéresser pour réaliser nos zones sur la carte. Et enfin à gauche, vous trouverez la liste des zones que vous aurez créé au fur et à mesure de l'avancement. Vous avez possibilité de les éditer ou de les supprimer.

Nous allons commencer par sélectionner l'outil de création de zones polygonales. En fait le principe est simple, cliquez au bord de la zone que vous souhaitez créer,et faite en le tour en cliquant plusieurs fois de la même façon. Cependant ne soyez pas forcement hyper précis et faite le tour grosomodo. Dites vous simplement que plus vous allez créer de points pour définir votre zone, et plus votre code sera lourd et long à charger dans votre page web.

demonstration-image-cliquable-web-gimp

Lorsque vous avez placez vos points, il suffit de faire un double clique gauche près du 1er point que vous avez créer pour finir la zone. A ce moment là, une fenêtre s'ouvre et vous demande d'insérer le lien qui s'ouvrira lorsque la personne clique sur cette zone. Vous pouvez également mettre un texte alternatif ALT, ca peut toujours être utile ;) Vous avez remarqué les 2 autres onglets dans cette fenêtre ? et bien " polygone" sert à retoucher votre zone via ces coordonnées, je ne vous conseille de ne pas y toucher, si vous souhaitez modifier votre zone, sélectionnez la flèche dans la barre vertical de gauche et vous pourrez déplacer vos points. Le dernier onglet " javascript " permet d'ajouter des effets mouseover et mouseout. Ne m'y connaissant pas plus que ça dans le domaine, je ne vais pas vous en parler ici, cependant si vous savez l'utiliser n'hésitez pas à le partager en commentaire ;)

Parametre-de-la-zone-cliquable

Il faut recommencer l'opération précédente autant de fois que vous souhaitez créer de zone. Faite juste attention à ne pas ce faire chevaucher vos zones, çela pourrait poser des problèmes lors de l'utilisation.

Lorsque vous avez terminé de créer toutes vos zones, faite enregistrer, choisissez un nom pour votre fichier ainsi que l'emplacement où vous souhaitez l'enregistrer, et nous allons passer à l'étape suivante : l'intégration à votre site web.

3 eme étape : Intégrez votre carte intéractive sur votre site web

Maintenant que nous avons enregistré notre fichier, nous allons le reprendre avec le bloc note de windows. Allez à l'emplacement ou vous avez enregistré votre fichier puis faite clic droit et ouvrir avec... Dans la liste des programmes sélectionnez le bloc note. Comme vous pouvez le voir, le fichier contient une première balise <img/> qui correspond à votre image. En second, vous avez une balise <map>. Celle ci contient toutes les coordonnées que vous avez créé précédemment.

Avant d'intégrer le code à votre site web, vous devez uploder votre image sur votre serveur. Une fois que c'est fait, récupérez l'adresse de votre image et copier là dans la balise <img/> entre les guillemets double de src.

Maintenant copier l'intégralité du code et collez le dans la source de votre page web, à l'emplacement ou vous souhaitez voir apparaître votre carte.

Et voila ! Votre carte est normalement fonctionnelle. Testez là afin de voir si vous avez bien posé vos coordonnées.

J'espère que ce tuto vous aura été utile. Sachez qu'il est possible d'utilisé ce greffon pour créer d'autres chose qu'une carte. Vous pouvez très bien créer une image qui vous servira de menu pour votre site par exemple et plein d'autres choses.

Partagez sur les réseaux sociaux

Catégories

Autres publications pouvant vous intéresser :

Commentaires :

Laisser un commentaire
  • baobab dit :
    14/12/2014 à 14h 11min

    Bonjour, j'ai réalisé une carte selon cette méthode le clic sur un département nous amène bien à la page du lien mais je cherche à créer une intéraction supplémentaire : comment feriez vous pour faire s'afficher une petite image en hover (par exemple sur ce site http://cortomaltese.com/fr/adventure-map/) ? après qq recherches j ai pensé au javascript mais n'y connaissant rien je me demandais si gimp aurait une méthode plus simple... Merci par avance

  • caro dit :
    16/6/2014 à 10h 58min

    Bonjour, Parfait fonctionne bien et pour que le département s'affiche dans une bulle au survol il faut remplir le champ onMouseover de l'onglet Javascript par title="Vosges 88"

  • Anthony Web dit :
    13/6/2014 à 10h 05min

    Bonjour, Tout d'abord merci pour ce tuto bien pratique. J'aimerais savoir dans le cas ou l'on doit modifier plusieurs fois la carte de france pour rajouter des choses au fer et a mesure, j'ai vu qu'on pouvait pas rouvrir le fichier une fois créer dans Gimp comment faire du coup pour pas ré avoir à tout faire depuis le début ? Cordialement

  • m_florent dit :
    20/2/2014 à 10h 39min

    Bonjour, Ma carte s'affiche mais il ne se passe rien lorsque je survole mes régions (pourtant j'ai bien coller entièrement mon code dans ma page web) D'où vient le problème ? Merci

  • lucien13013 dit :
    18/2/2014 à 15h 33min

    Merci pour votre tuto !! il est super :) J'ai fait la carte de mon site et sa fonctionne tres bien, merci mille fois.

  • ordi-tips dit :
    15/12/2013 à 19h 26min

    @ Boitel R&eacute;gis : Bonjour, J'ai moi même utilisé la version 2.8 pour ce tuto. Le chemin est le suivant : Filtres >>> web >>> image cliquable web Vous devez tout d'abord charger votre image, sinon l'option sera grisé.

  • Boitel Régis dit :
    30/11/2013 à 23h 56min

    Bonjour. Je ne trouve pas le fonctionnement avec le 2,8 pour faire le même travail.Pourriez-vous me l'expliquer.Merci Cordialement

  • Articles les plus consultés

    OrdiTips - Un Ordi et des Tips

    Sur OrdiTips je vous propose des astuces, des tutoriels et plein d'autres choses sur le monde du webdesign, de l'informatique et des appareils mobiles.
    Si vous l'avez trouvé intérréssant, je vous invite à faire découvrir OrdiTips auprès de votre entourage :)

    Annonces

     



    Créer un site
    Créer un site