Comment créer une Image Map sous WordPress ?

Quelle est l’utilité d’Image Map ?

Comme vous le savez, le puissant éditeur de WordPress offre la possibilité d’insérer dans un article de simples images mais aussi des images "cliquables", c’est à dire des images qui ont un lien qui mènent le visiteur vers une page web.

Le problème est que l’on ne peut attribuer qu’une seule adresse URL par image, par conséquent et pour des raisons bien spécifiques, si vous désirez attribuer plusieurs zones cliquables dans une même image, vous devrez alors faire appel aux fonctionnalités et aux multiples possibilités d’une Image Map telles que :

  • créer une carte de France dont les départements sont délimités et cliquables,
  • détailler une photo de mode où chaque article peut être ajouté au panier,
  • rendre un plan d’architecte interactif,
  • etc...

Le codage « fait main » de ces Images Map étant assez fastidieux et le catalogue des plugins gratuits proposé par WordPress étant plutôt limité dans cette catégorie, j’ai sélectionné pour vous les meilleurs plugins premiums du marché.

compo-image-map-wordpress

Mapplic

Mapplic est certainement le best-seller des plugins dans sa catégorie avec plus de 3 200 ventes. Il permet de créer des images cliquables responsives et optimisées pour les mobiles tout en important son propre fichier (il supporte les fichiers au format .jpg, .png ou .svg) ou en utilisant l’une des images pré-embarquées.

Parmi toutes ses fonctionnalités, on peut citer notamment le placement de marqueurs illimités et les liens avec URL et images personnalisées. Il est disponible au tarif de 25€.

mapplic-image-map

VOIR LE PLUGIN

ImageMap Pro

ImageMap Pro permet de créer des cartes ou images responsives et optimisées pour les mobile (fonction "touch"). Son atout est certainement la sélection, depuis l’éditeur, de zones cliquables selon des formes prédéfinies (rectangle, rond, polygone) ou customisables (en utilisant l'outil plume dans l'esprit de celui de Photoshop).

Les clics, le survol de la souris et les animations sont entièrement paramétrables. Il offre près de 150 icônes au choix pour illustrer vos épingles et est disponible pour seulement 19€.

image-map-pro
VOIR LE PLUGIN

MapSVG

Disponible au tarif de 35€, Map SVG est le plugin le plus cher de cette sélection ! La raison ? Peut-être parce qu’il est livré avec plus de 100 cartes géographiques pré-calibrées et qu’il offre la possibilité d’ajouter ses propres marqueurs de latitude et de longitude… Selon les besoins de votre site, ces images embarquées vous seront d'une grande utilité.

Outre les cartes géographiques, MapSVG offre le paramétrage de plans d’architectes, de plans de villages ou de n’importe quel fichier au format .SVG. Depuis le back-office, on peut également customiser les couleurs, les options du clic et des animations au survol de la souris.

map-svg-image-map
VOIR LE PLUGIN

iMapper

iMapper est un plugin permettant de réaliser des Images Map pleinement responsives. Les options de réglages sont assez avancées puisqu’il est possible de déposer un marqueur sur un point unique ou sur une zone définie, d’ouvrir une pop-up avec des tableaux sélectifs, de créer une carte géographique, ou de classer le contenu selon des catégories définies.

Pour aller plus loin dans la customisation, il offre le choix des polices dans le catalogue Google Font, le choix des couleurs, l’ajout de tags HTML et l’import de ses propres épingles. Ce plugin, disponible au tarif de 19€, peut aussi bien servir pour la description détaillée de produits dans un catalogue ou pour épingler des lieux sur une carte.

imapper-image-map
VOIR LE PLUGIN

WooMapper

Avec près de 200 ventes, WooMapper n’est certainement pas le « chouchou » de la plateforme mais c’est certainement parce qu’il répond à des besoins très précis : l’association du e-commerce embarqué dans une image interactive ! Pas tous les sites de vente en ligne nécessitent ce genre de technologie mais cela apporte une vraie plus-value !

Entièrement compatible avec WooCommerce, ce plugin permet de lier les produits de votre boutique et propose au visiteur de les ajouter au panier en un seul clic ! Totalement paramétrable, WooMapper propose de choisir entre ses 24 épingles différentes ou d’importer son propre design, l’utilisation de multiples épingles sur une même image, la couleur et la transparence, l’ajout de bordures et le tout en version responsive pour s’adapter à n’importe quel écran. Idéal pour ajouter de puissantes fonctionnalités à une boutique en ligne, ce plugin premium est disponible pour 20€.

woomapper-image-map
VOIR LE PLUGIN

Le choix de l’auteur

Chaque plugin de cette sélection se défend et se distingue par quelques différences de fonctionnalités pour finalement réaliser une Image Map ! Alors, si vos besoins ne sont pas très spécifiques, je vous conseille le plugin ImageMap Pro qui est un excellent rapport qualité/prix.

Par contre, si vous voulez vous offrir le luxe de rendre le « lookbook » de votre boutique en ligne entièrement cliquable, WooMapper est le plugin qu’il vous faut et son originalité fera très certainement craquer vos visiteurs...

A propos de l'auteur...

WPFormation

Fabrice Ducarme, formateur WordPress je suis éditeur, auteur et fondateur du site WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015 ainsi qu'au WP Tech Nantes 2014, je vous propose plus de 400 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

4 commentaires pertinents à ce jour ;)

  • Greg dit :
    Merci pour tous ces retours! Pas d’avis sur Mapify.it ou Interactive World Maps ?

    J’ai testé Mapify.it et je rencontre des problèmes de conflit js avec le lightbox du thème sur les images ou se situe les images et la carte en question sur la même page.

    Le retour de l’auteur est assez lent et ne solutionne pas mon soucis pour le moment..

    Cette liste tombe donc à point! :o)

  • Jacques dit :
    Bravo Fabrice, article et sujet très intéressant et souvent mésestimé quand on sait l’importance des images auprès des visiteurs.
    De plus très accessible financièrement, reste le problème d’un essai gratuit avant de prendre une décision.
    Encore merci…
  • WPFormation dit :
    les démos « live » sont justement là pour ça ;)
  • dj toulouse dit :
    J’ai découvert votre site par hasard en cherchant comment désactiver les mises à jour auto (j’ai trouvé!).

    merci pour toutes vos trouvailles et vos conseils !

Et si vous donniez votre avis ?

Tweet59
Share111
Share5
Buffer4