Ajouter une carte de zones cliquables sur une image

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

Prérequis :	Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :	Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.

Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.

Les cartes imagées cliquables et leurs inconvénients

Lorsque vous imbriquez une image dans un élément <a>, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « hotspots » en anglais) qui pointent chacunes vers une ressource distincte.

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

Les liens textuels (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.

Comment insérer une carte imagée

Étape 1 : l'image

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut alt est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas).
L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions.
Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. Une image de 72 pixels CSS de long et de large est un minimum acceptable (pour voir le problème posé par de trop petites régions : 50languages.com, où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué

On insère une image de la même façon que d'habitude (avec un élément <img> et un texte dans l'attribut alt). Si l'image n'est présente qu'à des fins de navigations, alt peut être laissé vide : alt="", si les valeurs pour les différents alt sont bien renseignés dans les éléments <area> que nous allons présenter.

Cette image contiendra une attribut spécial usemap. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap :

<img
  src="image-map.png"
  alt=""
  usemap="#exemple-map-1" />

Étape 2 : Activer les régions actives

Dans cette étape, nous allons remplir le code de l'élément <map>. Celui-ci n'a besoin que d'un seul attribut : name dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant :

<map name="exemple-map-1">

</map>

Dans cet élément <map>, on aura besoin d'utiliser les éléments <area>. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

shape

coords

shape (« forme » en anglais) prend l'une de ces quatre valeurs : circle (pour un cercle), rect (pour un rectangle), poly (pour un polygone) ou default (une zone default occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans coords.

Pour un cercle (circle) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.
Pour un rectange (rect) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.
Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).

Les coordonnées exprimées sont données en pixels CSS.

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

href

Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.

alt

Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte alt ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir nos conseils pour écrire des hyperliens accessibles.

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

<map name="exemple-map-1">
  <area shape="circle" coords="200,250,25"
    href="page-2.html" alt="exemple de cercle" />

  <area shape="rect" coords="10, 5, 20, 15"
    href="page-3.html" alt="exemple de rectangle" />

</map>

Étape 3 : S'assurer que la carte fonctionne pour chacun

Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.

Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.

Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder ce plugin jQuery réalisé par Matt Stow. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.