Images mapées
Les balises expliquées
HomeUpDown

Les balises des images mapées peuvent sembler très bizarres pour l'utilisateur moyen. Cependant, une fois décodées, elles déterminent, en peu d'éléments, tout ce que le navigateur a besoin pour les traiter.

Nous utilisons toujours la méthode CSIM [Client Side Image Maps] qui fait partie du langage Html (Html 3.0).


 

La balise de l'image mapée est :

<IMG SRC="image.gif" USEMAP="#nom_du_map"> pour une map dans le même fichier ou
<IMG SRC="image.gif" USEMAP="fichier.html#nom_du_map"> pour une map située dans un autre fichier.

En fait, on ajoute simplement à la balise classique de l'image, l'attribut USEMAP pour avertir le navigateur qu'il doit employer pour elle une map et le nom de la map en question.

Remarquez le système de # , propre aux ancres [anchor].


 

Les balises de la map :

<MAP NAME="nom_du_map">
<AREA SHAPE=méthode COORDS="coordonnées" HREF="lien" ALT="commentaires" TARGET="target_de_frame">
... autres balises AREA ...
</MAP>

Reprenons les éléments un par un :

L'attribut SHAPE

SHAPE =RECT ou CIRCLE ou POLYGON
RECT pour un rectangle.
CIRCLE pour un cercle.
POLYGON pour un polygone irrégulier.

Netscape (pas Explorer) supporte également un quatrième type : DEFAULT qui définit ce qu'il faut faire si l'utilisateur clique hors d'une des zones AREA définies. Pour des raisons de compatibilité, son usage n'est pas conseillé.

L'attribut COORDS

L'attribut COORDS note les coordonnées qui permettront au navigateur de reconstituer la forme géométrique.

Nous détaillons ci-après la façon, spécifique à chaque méthode, de noter ces coordonnées. La véritable difficulté pour le Webdesigner est de trouver les coordonnées des points dans l'image. C'est ici qu'un programme de traitement de l'image comme Paint Shop Pro, se révèle indispensable. Ou mieux encore un programme comme MapEdit ou MapThis (voir plus loin).

Pour un rectangle :
COORDS="x,y,x',y'"

Pour un cercle
COORDS="x,y,r" soit le point central et le rayon

Pour un polygone
Coords="x1,y1,x2,y2,x3,y3,x4,y4" et ce pour autant de points qu'il y a dans le polygone.

L'attribut LINK

L'attribut LINK spécifie le fichier associé à la zone sélectionnée. L'adressage se fait de la façon tout à fait classique en HTML.

L'attribut ALT (facultatif)

L'attribut ALT permet d'ajouter un commentaire. Ce commentaire, tout comme l'attribut ALT des images, sera affiché par certaines versions récentes de navigateur.

L'attribut TARGET (facultatif)

L'attribut TARGET permet de spécifier la fenêtre de frame dans laquelle doit s'ouvrir le fichier spécifié. Ceci nécessite, bien entendu, une connaissance pointue des frames (voir Apprendre le langage Html : les frames).