Générateur d'image map

Créez une image map HTML en ligne en quelques secondes avec ce générateur d'image map gratuit. Importez n'importe quelle image, puis dessinez directement dessus des zones cliquables rectangulaires, circulaires et polygonales, attribuez à chaque zone une URL de lien, un texte alternatif, un titre et une cible, et obtenez instantanément un code HTML propre avec <img usemap>, <map> et <area> que vous pouvez copier ou télécharger. Les coordonnées sont calculées à partir de la taille en pixels réelle de votre image, si bien que les coords exportés correspondent parfaitement, et vous pouvez intégrer l'image en data URI ou activer un script responsive. Tout fonctionne 100% dans votre navigateur : votre image n'est jamais envoyée sur un serveur et reste donc totalement privée.

🔒 100 % privé — les fichiers ne quittent jamais votre appareil

Chargement…

Comment faire

  1. Importez ou déposez une image qui servira de base à votre image map cliquable.
  2. Choisissez l'outil rectangle, cercle ou polygone et dessinez les zones sur les parties que vous souhaitez lier.
  3. Sélectionnez chaque zone pour définir son URL de lien, son texte alternatif, son titre et si elle s'ouvre dans un nouvel onglet.
  4. Copiez le code HTML <map> et <area> généré ou téléchargez-le sous forme de fichier .html prêt à l'emploi.

Questions fréquentes

Qu'est-ce qu'une image map HTML ?

Une image map HTML permet à différentes régions d'une même image de renvoyer vers des destinations différentes. Elle utilise une balise <img> avec l'attribut usemap ainsi qu'un élément <map> contenant des balises <area> — une zone cliquable par hotspot. Cet outil dessine ces zones visuellement et écrit les coords exacts à votre place.

Quels formats d'image puis-je utiliser ?

Vous pouvez utiliser tout format que votre navigateur sait afficher, notamment JPG, PNG, WebP et GIF. L'outil lit les dimensions en pixels réelles de l'image afin que les coordonnées exportées correspondent exactement à l'image.

Mon image est-elle envoyée ou reste-t-elle privée ?

Votre image n'est jamais envoyée. L'ensemble du générateur d'image map fonctionne 100% dans votre navigateur : l'image et le code HTML que vous créez restent sur votre appareil et rien n'est transmis à un serveur.

Quelles formes puis-je dessiner comme zones cliquables ?

Vous pouvez dessiner des rectangles, des cercles et des polygones. Les rectangles et les cercles se dessinent en glissant, et les polygones se construisent en cliquant sur chaque point puis en double-cliquant (ou en appuyant sur Entrée) pour fermer la forme. Chaque zone exporte les attributs shape et coords corrects.

Puis-je définir des liens, un texte alternatif et ouvrir les zones dans un nouvel onglet ?

Oui. Pour chaque zone, vous pouvez définir l'URL du lien (href), le texte alternatif, un titre en infobulle et la cible. Choisir l'ouverture dans un nouvel onglet définit target="_blank" et ajoute automatiquement rel="noopener" par sécurité.

Comment rendre l'image map responsive ?

Activez l'option responsive et le code exporté ajoute un petit script ainsi que des attributs data-coords qui redimensionnent les coordonnées des zones chaque fois que l'image est redimensionnée. Vous pouvez aussi intégrer l'image en data URI pour que l'extrait fonctionne comme un bloc autonome.

À propos de cet outil

Générateur d'image map en ligne et gratuit : importez une image, dessinez des zones rectangulaires, circulaires et polygonales, ajoutez des liens et copiez ou téléchargez le code HTML usemap. 100% dans votre navigateur, sans envoi.

Outils associés