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. |
Attention : 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
(« forme » en anglais) prend l'une de ces quatre valeurs :circle
(pour un cercle),rect
(pour un rectangle),poly
(pour un polygone) oudefault
(une zonedefault
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 danscoords
.- 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é.
- Pour un cercle (
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'attributhref
est vide et que l'image entière possède déjà un attributalt
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.