Les images référencées : le marqueur <MAP>

On a vu précédemment qu'il est possible d'associer un lien à une image complète. Il est aussi possible de séparer une image en plusieurs zones, et d'associer un lien à chacune de ces zones.

Pour cela, il faut associer une "carte" à une image grâce à l'attribut USEMAP du marqueur <IMG>. On obtient une ligne de commande de la forme suivante :
         <IMG SRC="mon_image.gif" WIDTH="largeur" HEIGHT="hauteur" USEMAP="#essai_map">
         #essai_map est une URL.

La "carte" essai_map aura préalablement été définit :
         <MAP NAME="essai_map">
         <AREA SHAPE="forme" COORDS="abs1,ord1,abs2,ord2,..." HREF="doc_a_atteindre.htm">
         ...
         <AREA SHAPE=.......>
         </MAP>

La variable forme peut prendre les valeurs suivantes :

RECT : La zone associée au lien vers le document doc_a_atteindre.htm est rectangulaire. Les coordonnées des angles supérieur et inférieur sont définies dans l'attribut COORDS. On saisi dans cet attribut tout d'abord l'abscisse puis l'ordonnée de l'angle supérieur gauche. Ensuite, on saisi l'abscisse puis l'ordonnée de l'angle inférieur droit.

CIRCLE : La zone associée au lien vers le document doc_a_atteindre.htm est circulaire. Les coordonnées du centre du cercle, et le rayon de ce cercle sont définis dans l'attribut COORDS. On saisi dans cet attribut tout d'abord l'abscisse puis l'ordonnée du centre du cercle, et enfin le rayon de ce cercle en pixels.

POLY : La zone associée au lien vers le document doc_a_atteindre.htm est un polygone. L'attribut COORDS contient tout d'abord l'abscisse puis l'ordonée du premier point, puis l'abscisse et l'ordonnées du deuxième point, et ainsi de suite pour tout les points du polygone.

Pour obtenir des renseignements sur la balise HREF, merci de cliquer ici pour atteindre la partie consacrée aux liens hypertextes.

Exemple :

<img src="../../images/tech_how_to.gif" width="72" height="72" usemap="#MAP" border="0">
<map name="MAP">
<!-- Lorsque l'utilisateur clique dans le rectangle dont les coordonnées de l'angle supérieur sont (10,2) et les coordonnées de l'angle inférieur sont (61,33), il atteind le document r_exempleA.htm -->
<area shape="rect" coords="10,2,61,33" href="rexemple5A.htm">
<area shape="rect" coords="2,39,70,68" href="rexemple5B.htm">
</map>

Les fichiers rexemple5A.htm et rexemple5B.htm contiennent simplement du texte pour indiquer à l'utilisateur à quel endroit il a cliqué sur l'image. (Pour voir le code source de ces fichiers, cliquer avec le bouton droit sur la fenêtre du navigateur, et choisissez l'option afficher la source).

Rubriques :

Documentations :

Liens utiles :