HTML Image Map : comment créer des images cli­quables pour son site Web ?

Une Image Map HTML permet de rendre dif­fé­rentes zones d’une image ou d’une vidéo cli­quables, dirigeant les uti­li­sa­teurs vers des liens internes ou externes. Ces zones in­te­rac­tives sont définies en spé­ci­fiant des coor­don­nées précises, qui sont ensuite associées aux URL cor­res­pon­dantes.

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

Les Image Maps HTML (« carte d’image » ou « carte cliquable » en français) sont des gra­phiques in­te­rac­tifs qui amé­lio­rent la con­vi­via­lité d’un site en per­met­tant d’ajouter plusieurs liens cli­quables à une image ou une vidéo dans un document HTML. Ces zones cli­quables peuvent rediriger vers des sous-pages, des URL internes ou externes, ou permettre le té­lé­char­ge­ment de fichiers. Lorsque les uti­li­sa­teurs cliquent sur ces zones, les actions cor­res­pon­dantes 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é­ra­teurs. Avec ces outils en ligne, il suffit de té­lé­char­ger l’image souhaitée et de définir ensuite les cibles de liens sou­hai­tées dans les zones sou­hai­té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 des­ti­na­tions au sein d’une même image ou vidéo. Voici quelques exemples d’ap­pli­ca­tion des Image Maps HTML :

• Cartes géo­gra­phiques avec des zones cli­quables pour des régions, villes, suc­cur­sales d’en­tre­prises ou stations-service
• Images de recettes four­nis­sant des in­for­ma­tions sup­plé­men­taires sur les in­gré­dients re­pré­sen­tés
• Bannières pu­bli­ci­taires avec des liens vers dif­fé­rents produits, ca­té­go­ries ou services
• In­for­ma­tions sup­plé­men­taires ou pu­bli­ci­tés insérées dans des vidéos
• Sites Web sous forme d’Image Map avec plusieurs éléments de na­vi­ga­tion
• 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é­ren­cée. Pour sim­pli­fier, 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 ins­truc­tions sur les coor­don­né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é­fi­nis­sez des zones et des coor­don­nées (coords) avec les­quelles vous con­cré­ti­sez la position, la taille et la forme de la surface de renvoi. Les zones peuvent être placées sous forme de rec­tangles, de polygones ou de cercles dans un graphique. Les coor­don­né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 in­di­vi­duelles de la carte cliquable. Pour utiliser une Image Map, il faut au moins un attribut area. Pour définir les pro­prié­tés de l’Image Map et de ses zones de référence in­di­vi­duelles, les attributs HTML suivants peuvent être utilisés :

• shape : l’attribut shape permet de définir les formes des zones cli­quables dans un graphique. On peut utiliser rect pour les rec­tangles, circle pour les cercles, ou poly pour les polygones. La syntaxe pour rect est rect = x1,y1,x2,y2, où x1 et y1 cor­res­pon­dent aux coor­don­né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 coor­don­nées qui dé­li­mi­tent une zone cliquable. Ces coor­don­né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 al­ter­na­tif en cas de problème de char­ge­ment de l’Image Map, utile pour les na­vi­ga­teurs textuels ou pour l’ac­ces­si­bi­lité.
• title : l’attribut title affiche un court texte in­for­ma­tif lorsque l’uti­li­sa­teur 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é con­cré­ti­sé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 dis­po­nible 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 cli­quables ont été définies dans ce cas : la plage, la mer et le ciel. Quiconque clique dans les zones est au­to­ma­ti­que­ment redirigé vers les landing pages cor­res­pon­dantes, qui s’ouvrent alors dans une nouvelle fenêtre.

Close