HTML Image Map : comment créer des images cliquables pour son site Web ?

Une Image Map HTML permet de rendre différentes zones d’une image ou d’une vidéo cliquables, dirigeant les utilisateurs vers des liens internes ou externes. Ces zones interactives sont définies en spécifiant des coordonnées précises, qui sont ensuite associées aux URL correspondantes.

Qu’est-ce qu’une Image Map HTML ?

Les Image Maps HTML (« carte d’image » ou « carte cliquable » en français) sont des graphiques interactifs qui améliorent la convivialité d’un site en permettant d’ajouter plusieurs liens cliquables à une image ou une vidéo dans un document HTML. Ces zones cliquables peuvent rediriger vers des sous-pages, des URL internes ou externes, ou permettre le téléchargement de fichiers. Lorsque les utilisateurs cliquent sur ces zones, les actions correspondantes sont exécutées ou les contenus liés s’affichent.

La balise HTML (en anglais tag) <map> est utilisée pour créer des cartes d’image. La balise HTML <img> sert quant à elle à intégrer l’Image Map créée.

Si vous ne souhaitez pas créer vous-même votre Image Map HTML, vous pouvez recourir à des générateurs. Avec ces outils en ligne, il suffit de télécharger l’image souhaitée et de définir ensuite les cibles de liens souhaitées dans les zones souhaitées.

À quoi peut servir une Image Map HTML ?

Une Image Map peut être intégrée dans n’importe quel document HTML, dès que les zones de référence sont définies. La grande force des Image Maps réside dans leur capacité à lier plusieurs destinations au sein d’une même image ou vidéo. Voici quelques exemples d’application des Image Maps HTML :

• Cartes géographiques avec des zones cliquables pour des régions, villes, succursales d’entreprises ou stations-service
• Images de recettes fournissant des informations supplémentaires sur les ingrédients représentés
• Bannières publicitaires avec des liens vers différents produits, catégories ou services
• Informations supplémentaires ou publicités insérées dans des vidéos
• Sites Web sous forme d’Image Map avec plusieurs éléments de navigation
• Affichage de modes de jeu, fonctions ou niveaux dans des jeux en ligne

Comment créer une Image Map en HTML ?

Pour créer une Image Map, l’élément HTML <map> est utilisé. L’attribut name doit être utilisé pour que l’Image Map puisse être référencée. Pour simplifier, le nom de la carte cliquable permet d’ancrer, de lier et d’adresser la cible souhaitée dans un graphique ou une vidéo. Voici d’autres instructions sur les coordonnées des surfaces de référence liées.

L’Image Map peut être placée à l’endroit de votre choix dans un document HTML. Pour cela, vous définissez des zones et des coordonnées (coords) avec lesquelles vous concrétisez la position, la taille et la forme de la surface de renvoi. Les zones peuvent être placées sous forme de rectangles, de polygones ou de cercles dans un graphique. Les coordonnées que vous utilisez dépendent de la forme de la surface de référence.

Avec l’attribut HTML <area>, vous pouvez à nouveau définir des zones individuelles de la carte cliquable. Pour utiliser une Image Map, il faut au moins un attribut area. Pour définir les propriétés de l’Image Map et de ses zones de référence individuelles, les attributs HTML suivants peuvent être utilisés :

• shape : l’attribut shape permet de définir les formes des zones cliquables dans un graphique. On peut utiliser rect pour les rectangles, circle pour les cercles, ou poly pour les polygones. La syntaxe pour rect est rect = x1,y1,x2,y2, où x1 et y1 correspondent aux coordonnées du coin supérieur gauche, et x2 et y2 au coin inférieur droit. La syntaxe pour circle est circle = xc,yc,radius, et pour les polygones, poly = x1,y1,x2,y2,x3,y3 ....
• coords : l’attribut coords spécifie les coordonnées qui délimitent une zone cliquable. Ces coordonnées sont définies en pixels, souvent à l’aide d’un éditeur graphique.
• href : l’attribut href permet de lier la zone cliquable à une URL ou à une adresse interne ou externe.
• alt : l’attribut alt fournit un texte alternatif en cas de problème de chargement de l’Image Map, utile pour les navigateurs textuels ou pour l’accessibilité.
• title : l’attribut title affiche un court texte informatif lorsque l’utilisateur survole une zone cliquable de l’image.
• img : la balise img est utilisée pour insérer et afficher une image dans un document HTML.

Comment intégrer une Image Map dans une page HTML ?

Une fois que l’Image Map a été concrétisée, elle peut être intégrée dans un site Web à l’aide de la balise HTML <img> à l’endroit souhaité. Pour intégrer l’Image Map souhaitée et la rendre enfin disponible sur le site Web, utilisez en plus l’élément <map> déjà mentionné. Suivez l’exemple suivant :

<img src="plageimage.jpg" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="Plage" title="Plage" href="https://exemple.com/plage" coords="1,928,3260,1834" shape="rect">
    <area target="_blank" alt="Mer" title="Mer" href="https://exemple.com/mer" coords="3263,556,7,919" shape="rect">
    <area target="_blank" alt="Ciel" title="Ciel" href="https://exemple.com/ciel" coords="3263,510,10,0" shape="rect">
</map>

Pour l’image de plage dans cet exemple, trois zones cliquables ont été définies dans ce cas : la plage, la mer et le ciel. Quiconque clique dans les zones est automatiquement redirigé vers les landing pages correspondantes, qui s’ouvrent alors dans une nouvelle fenêtre.

Close