search
top

Créer une carte de France ou une zone d’image cliquable

Je n’avais pas forcément prévu de faire une section wordpress (encore moins « développement ») sur ce blog mais finalement c’est chose faite. Pour les besoins d’un site, il me fallait une carte de France, cliquable sous WordPress, idéalement un plugin, mais je n’ai pas trouvé mon bonheur. Finalement, en fouinant un peu sur la toile, j’ai trouvé quelques cartes gratuites avec le codage associé, que vous trouverez ci-dessous. Pour les modifier, c’est plutôt simple, il faut simplement une image et utiliser les balises MAP, AREA et COORDS pour créer des zones cliquables sur une image, ici, une carte de France.

Comment faire une carte de France cliquable?

Si vous ne connaissez pas le site C-Map, qui fournit des cartes cliquables et que vous avez besoins de cartes interactives, vous devriez y faire un tour.  Vous pourrez trouver des cartes gratuites ou payantes, de France ou d’autres régions du monde qui sont interactives et qui fournissent une bonne base si vous avez des besoins plus spécifiques. Comme évoqué en introduction, rien de révolutionnaire dans mon choix de carte : une image et un peu de code. L’avantage c’est de ne pas partir de zéro et de se taper toutes les coordonnées à remplir à la main, car il faut l’avouer, cela devient vite ennuyant, surtout pour les départements.

Bref, j’ai opté pour une carte gratuite des régions de France. Pour installer le tout, il suffit de respecter les étapes suivantes:

  • Télécharger la carte de France avec les régions ou départements en petit format ou en moyen format
  • Après avoir dézipper le fichier, il faut uploader carte en .png dans la galerie médias de wordpress
  • Créer une page sur laquelle vous souhaitez mettre la carte
  • Intégrer le code fournit dans le zip directement dans votre page
  • Modifier le chemin d’accès de la carte en .png
  • Créer des landing pages régions ou départements
  • Modifier les liens intégrés dans le code en respectant la structure des URL

Ensuite, vous aurez ce type de résultat:

Simple non? Pour l’exemple, j’ai juste mis un lien sur la région Bretagne. Mais comme j’ai modifié la taille de la carte, les coordonnées n’étaient plus bonnes…

Modifier les coordonnées pour rendre cliquable une image

Pour modifier les coordonnées, c’est assez simple, il vous faut juste Gimp ou Photoshop et un peu de patience. Voici les trois différentes étapes à respecter:

  • Ouvrir l’image en question, ici la carte de France, avec Gimp
  • Rechercher les coordonnées à l’aide du curseur de la souris et récupérer les coordonnées en pixel (abscisses et ordonnées)

Par exemple, pour rendre cliquable la Bretagne, j’ai récupérer les coordonnées des points mentionnés en rouge dans le screenshot ci-dessous. Les coordonnées sont visibles en bas à gauche de la fenêtre, ici en orange.

Coords pour rendre une image cliquable

Récupérer les coordonnées d’une image avec Gimp

  • Intégrer les nouvelles coordonnées dans la balise coords. Il faut mettre les deux valeurs et répéter l’action pour les différents points. Donc dans cet exemple, cela fait 12 coordonnées à insérer dans la balise. Plus vous en mettrez, plus cela sera précis, d’ailleurs j’ai mis plus de 12 coordonnées mais c’est pour expliquer la démarche.

Il y a certainement d’autres manières d’avoir ce type de fonction, en passant par un plugin (que je n’ai pas trouvé) ou bien en utilisant d’autres logiciels pour faire ceci, mais si vous ne modifiez pas les dimensions des cartes en téléchargement dans cet article, vous gagnerez un temps fou. Sinon, il faudra passer par Gimp pour les coordonnées, mais cela va prendre plus de temps. Bien sûr, ça ne fonctionne pas uniquement sous WordPress, mais cela aura au moins de le mérite de lancer une partie de ce blog dédiée à ce CMS, et de blogguer un peu plus là dessus.

Killian Kostiha, 27 printemps, SERP addict, curieux et passionné, je suis consultant SEO dans une agence web à ParisSpikly. Je partage ici quelques articles sur le référencement, le SMO, des bases SEO et des outils pratiques pour mieux gérer un site Internet. Vous pouvez également me suivre sur TwitterFacebookGoogle Plus pour discuter et échanger sur le référencement naturel, où autre. Il n’y a pas que Google dans la vie :-).

18 Responses to “Créer une carte de France ou une zone d’image cliquable”

  1. Christian dit :

    Page mise en signet !
    Merci

  2. Eric from Encoder Software dit :

    Merci Killian pour cet excellent tutoriel ! En plus quand je regarde ton choix « Carte de France » et zone cliquable, je ne peux m’empêcher de voir la carte du Bon Coin.

    Pour ma part, je ne connaissais pas le site C-Map donc comme Christian, c’est direct dans mes BookMarks.

    Merci encore et bon WE à tous !

  3. Simon12 from Interdit bancaire dit :

    Si j’avais eu ce mini-tuto il y a quelques semaines cela m’aurait bien aidé. Personnellement j’ai tout fait à la main et ça m’a pris des heures. Qu’en est t-il de la compatibilité entre navigateurs ?

  4. SEO is not a crime dit :

    @Eric : De rien! Après c’est une carte de france, donc cela reste basique, mais tu peux prendre une autre carte et rajouter des styles comme sur le bon coin.

    @Simon : Navigateurs et tablettes OK. C’est de l’HTML donc pas de soucis.

  5. Rodrigue from consultant wordpress dit :

    Superbe, je suis tombé sur le tweet de veille seo il y avait bien un script qui faisait ça mais très complexe à mettre en place pour les novices souhaitant créer un site d’annonce ^^.

  6. lereferenceur from comment référencer un site web dit :

    Il y a toutes les cartes du monde. Malheureusement il n’y a pas tous les les pays.

    Il m’aurait bien fallu une carte de ce genre pour un projet en cours pour l’Australie mais avec les 5 etats.

    Dommage. Peut être à venir.

    En tout cas c’est pratique.
    Sinon il y a dreamweaver. Assez facile pour faire ce genre de chose.

  7. SEO is not a crime dit :

    @Rodrigue: Content si cela t’aide :-)

    @Le referenceur: Tu peux toujours chopper un .png de l’Australie mais tu repars de zéro :-)

  8. TiPi Com and Web from Création WordPress dit :

    Pas mal comme histoire. Effectivement, je l’avais déjà testé il y a longtemps avec Dreamweaver.

    Pour WordPress, tu peux aussi utiliser MapPress http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/ plutôt bien fichu ;)

  9. pierre from groupe electrogene dit :

    J’avais l’habitude de réaliser ce type de carte sous dream, ça fonctionne bien aussi mais je garde en favori, ça peu toujours servir…
    Merci !

  10. EspaceM dit :

    Un grand merci ! J’avais il y a fort longtemps eu l’idée de mettre une carte de ce genre pour un annuaire mais j’avais jamais réussi à cause de mes lacunes dans le codage. Ce petit tuto me permettra peut être un jour de me lancer à nouveau dans ce vieux projet !

  11. Rodolphe from jeux de combat dit :

    Pour un de mes sites, j’ai du demander à un ami qui touche vraiment de me faire ce genre de carte croyant que j’en était pas capable, je vois que j’aurais pu le faire moi même vu que c’est très bien expliqué ici. La prochaine fois, je pourrais m’en sortir seul alors ;-)

  12. Gilles Bhada dit :

    Merci pour le tuto, le rendu est nickel.
    Après, c’est aussi possible de le faire en SVG sinon.

  13. Chauffage dit :

    Les coordonnées en pixel utilisé avec gimp, ne posent pas de problèmes selon résolution de l’écran PC, tablette et mobile ?

  14. SEO is not a crime dit :

    Non vu qu’elles sont issues du logiciel, ce ne sont pas des coordonnées GPS.
    J’ai testé sur tablette et ça fonctionne bien.

  15. Zistoloen from Arise dit :

    Bonsoir,

    Merci pour ce tutoriel. Je me suis souvent demandé comment les sites faisaient pour déterminer les régions de France en fonction du survol de la souris. La solution énoncée dans l’article est plus que satisfaisante.

    Cet article me servira sûrement dans un futur projet.

    Bonne soirée.

    P.S. : Merci Photoshop.

  16. Arnaud dit :

    Cool ça, je m’étais jamais penché sur le sujet, mais ça va pouvoir me servir pour plusieurs de mes sites, et ça, c’est cool. D’ailleurs, cela me donne une super idée d’annuaire. Merci pour la recherche killian

  17. SEO is not a crime dit :

    Après les cartes peuvent être plus customisées.
    Donc on attend l’annuaire :-)

  18. David dit :

    Merci beaucoup. Super tutoriel et très bien expliqué – vous m’avez beaucoup aider.

Laisser un commentaire

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

Avant de poster un commentaire, merci de lire les règles de publication

top