Générateur d'image map : dessinez des zones cliquables, obtenez le HTML | We.Inc
Dessinez des rectangles, des cercles et des polygones sur votre propre image, donnez à chacun un lien et un texte alt, puis copiez le HTML classique map et area ou une version SVG responsive.
Générateur d'image map
Une image map transforme des parties d'une même image en liens distincts. Chargez une image, faites glisser pour dessiner des rectangles ou des cercles, cliquez des points pour les polygones, et saisissez un lien et un texte alt pour chaque zone. Copiez le HTML classique map et area, ou une version SVG responsive dont les zones rétrécissent avec l'image sur téléphone.
Formes de area et leurs coords
Signification
Coins supérieur gauche et inférieur droit
Centre et rayon
Chaque coin dans l'ordre ; la forme se ferme d'elle-même
(aucune)
Tout ce qui n'est pas couvert par une autre zone
Les plans d'étage, les schémas de produits, les photos d'équipe et les cartes ont souvent besoin de plusieurs liens dans une seule image. Dessiner les zones à l'œil est bien plus rapide que mesurer des pixels, et votre image ne quitte jamais votre ordinateur : elle est lue dans le navigateur et seule sa taille est utilisée dans le code.
Utilisez le plan d'étage d'exemple ou choisissez votre propre fichier image. Les coordonnées sont mesurées en pixels réels de l'image, même quand l'aperçu est réduit.
Choisissez Rectangle ou Cercle et faites glisser sur l'image, ou choisissez Polygone, cliquez sur chaque coin, puis appuyez sur Terminer le polygone.
Modifiez le lien, le texte alt et les coordonnées de chaque zone dans la liste. Les coordonnées saisies mettent à jour le dessin, ce qui permet aussi aux utilisateurs du clavier de créer une image map.
Copiez le HTML classique ou le SVG responsive. Remplacez le chemin de l'image dans le code par l'emplacement du fichier sur votre site.
Chaque zone avec un href a besoin d'un texte alt. C'est ce que lisent les lecteurs d'écran, alors indiquez la destination, par exemple Réserver une table au café.
Les coordonnées d'une image map classique sont des pixels CSS fixes. Si le CSS réduit l'image sur téléphone, les zones restent où elles étaient : utilisez donc la sortie SVG pour les mises en page fluides.
Gardez des zones cliquables assez grandes pour être touchées confortablement, et évitez les zones qui se touchent sans espace.
Ne cachez pas le seul accès à une page dans une image. Répétez les liens importants en texte normal à proximité.
Questions fréquentes
Comment relier la map à l'image ?
Donnez un nom à la map, puis réglez usemap sur l'img avec le même nom précédé d'un #, par exemple usemap="#site-map" et map name="site-map". Le générateur écrit les deux pour vous.
Les image maps HTML sont-elles responsive ?
Pas d'elles-mêmes. Les coordonnées sont des nombres de pixels CSS, elles ne suivent donc pas une image redimensionnée par le CSS. La sortie SVG résout ce problème avec un viewBox, qui met à l'échelle l'image et les formes des liens ensemble.
Mon image est-elle envoyée en ligne ?
Non. Le fichier est ouvert avec une URL d'objet locale pour que le navigateur puisse l'afficher et lire sa largeur et sa hauteur. Rien n'est envoyé à We.Inc ni à personne d'autre.
Les zones peuvent-elles se chevaucher ?
Oui. Là où deux zones se chevauchent, celle listée en premier dans la map reçoit le clic, placez donc les petites zones avant les plus grandes qui les entourent.
Map classique ou liens SVG
Le duo map et area fonctionne dans les navigateurs depuis des décennies et garde l'image sous forme d'img normal, ce qui est simple pour les outils de contenu. Son point faible, ce sont les coordonnées fixes.
La version SVG dessine l'image dans un élément svg et enveloppe chaque forme dans un lien. Comme tout partage un même viewBox, les zones se mettent parfaitement à l'échelle, et vous pouvez ajouter un contour au survol avec du CSS sur les formes.
Des images cliquables accessibles
Donnez à l'image elle-même un texte alt qui décrit l'ensemble, et à chaque zone un texte alt qui nomme sa destination. Les utilisateurs du clavier parcourent les zones avec Tab dans l'ordre du code source, listez-les donc dans un ordre de lecture logique.
Testez en parcourant le résultat avec Tab. Si l'ordre du focus saute d'un bout à l'autre de l'image, réordonnez les lignes de la liste avant de copier.
Le code du plan d'étage d'exemple
Voici les deux sorties que le générateur écrit pour les quatre zones d'exemple.
Map et area classiques
Fonctionne partout à la taille naturelle de l'image, 600 par 360 pixels.
Liens SVG responsive
Le viewBox correspond à la taille de l'image, donc chaque forme de lien s'adapte à l'image.
Zone {n}
Dessinez vos zones
Dessinez des rectangles, des cercles et des polygones sur le plan d'étage d'exemple ou sur votre propre image, puis définissez un lien et un texte alt pour chaque zone.
Votre image
Outil de dessin
Rectangle
Cercle
Polygone
Terminer le polygone
Annuler
Taille de l'image : {w} × {h} pixels.
Cliquez sur chaque coin, puis sur Terminer le polygone.