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

Mer. 16 Oct. 2013

Article publié dans la catégorie Tutoriel Webdesign



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érencer par région, et pour rendre tous 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 souvient 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 classique 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'outils 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 etre 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 conseil 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 chevauché vos zones, ça pourrais poser des problème 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 ou 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 fais, récupérez l'adresse de votre image et copier là dans la balise <img> entre les guillemet 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.

Christian Aslan



Si vous avez apprécié ce tutoriel, n'hésitez pas à le partager ou à laissez votre commentaire !


 
• Autres articles pouvant vous intéresser :
Redirection 301 - Prestashop
Panier déroulant avec Jquery Easing Plugin
Nouvautès sur OrdiTips ! Kit graphiques et templates en téléchargement gratuit
Color Scheme Designer 3 - Trouver la bonne association de couleurs !
{ Webdesign } Les ombres en css avec box-shadow;


• Catégories liées :
tutoriel
webdesign


• Commentaires : Cliquez ici pour laisser un commentaire

 
Le 14/12/2014 par baobab :

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
Le 16/6/2014 par caro :

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"
Le 13/6/2014 par Anthony Web :

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
Le 20/2/2014 par m_florent :

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
Le 18/2/2014 par lucien13013 :

Merci pour votre tuto !!

il est super :)

J'ai fait la carte de mon site et sa fonctionne tres bien, merci mille fois.
Le 15/12/2013 par Christian A. (OrdiTips):

@ 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é.


Le 30/11/2013 par Boitel Régis :

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