Hyperimage (également appelée image réactive ou "image map")

Définition de "Hyperimage" :

Une hyperimage, également appelée image réactive ou "image map", est une image composée de diverses zones que l'utilisateur peut cliquer. Ce type d'image permet d'associer plusieurs liens hypertexte à un même élément graphique. Il s'agit par exemple d'une carte de France permettant à l'utilisateur de choisir un département (en cliquant sur la zone représentée par le département visé).


Explications, conseils, réflexions :

Il existe deux types d'images avec zone cliquables : les hyperimages côté serveur et les hyperimages côté client.

Les images avec zones cliquables côté serveur sont identifiables par la présence de l'attribut "ismap" et le fait qu'il n'y ait pas de liste des zones découpées dans le code de la page. C'est le serveur qui se charge d'identifier la zone visée en fonction des coordonnées de la souris.
Cette technique ancienne pose des problèmes d'accessibilité puisque l'information n'est pas accessible dans divers cas: navigation au clavier, utilisation d'un lecteur d'écran, désactivation des images...

Les images avec zones cliquables côté client sont donc à privilégier. Il s'agit d'une image ayant un élément "map" associé via l'attribut "usemap". Les informations relatives aux zones cliquables sont directement insérées dans le code html de la page.

Exemple de code :
<img src="votre-image.gif" ismap="ismap" alt="Carte avec régions" usemap="#regions" />
<map name="regions">
<area shape="rect" coords="0,0,150,50" href="region1.html" alt="Région 1" />
<area shape="rect" coords="0,50,150,100" href="region2.html" alt="Région 2" />
<area shape="rect" coords="0,100,150,150" href="region3.html" alt="Région 3" />
</map>