10.1 "Client-side" Maps
A. Principe:
-
La définition des zones sensibles de l'image se trouve dans la page HTML.
-
C'est le client (e.g. Netscape) qui se charge de gérer les clicks de l'utilisateur
-
La définition d'une image cliquable comporte deux parties:
-
La définition des zones et des actions à exécuter (MAP & AREA)
-
L'image et son lien vers la définition de zones (USEMAP)
B. Les marqeurs MAP & AREA
Le marqueur "MAP" sert à définir le début et la fin d'une section de définition de zones sensibles.
Le marqueur "AREA" sert à définir des zones à l'intérieur d'une "MAP".
Paramètre de MAP
Le paramètre NAME sert à définir un nom symbolique pour la définition de zones cliquables
name="nom_de_la_map"
<map name="pegmap"> ... </map>
C. Paramètres de AREA
-
tous sont obligatoires, ils sont séparés dans les exemples pour raison de clarté):
SHAPE
correspond à la forme de la zone sensible.
shape = "rect ou poly ou circle"
<area shape="rect"/>
COORDS
indique les coordonnées en pixel pour définir la taille des zones.
Le coin en haut à gauche de l'image est le point d'origine.
Pour les rectangles:
les coordonnées à spécifier sont le coin en haut à gauche et celui en bas à droite.
COORDS="n,m,i,j"
<area shape="rect" coords="16,17,249,77"/>
Pour les cercles:
les coordonnées du centre et la valeur du rayon sont nécessaires (3 nombres).
coords="l,k,p"
<area shape="circle" coords="16,249,10"/>
Pour les polygones:
on donne les coordonnées pour chaque point
coords="x1,y1,x2,y2,x3,y3,...,...."
<area shape="poly" coords="10,10, 10,15, 15,15, ...."/>
HREF
contient l'URL qui est chargé lorsque l'utilisateur clique sur une des zones sensibles.
href="url" où URL est une adresse WWW
<area href="http://tecfa.unige.ch/~schneide"/>
Exemple 10-2: Définition des zones d'une image cliquable
<map name="pegmap">
<area shape="rect" coords="16,17,249,77" href="http://tecfa.unige.ch/~schneide/>
<area shape="rect" coords="16,91,249,213" href="http://tecfa.unige.ch/welcome.html"/>
<area shape="rect" coords="16,228,249,437" href="http://tecfa.unige.ch/~jermann"/>
</map>
USEMAP
Le paramètre USEMAP se met à l'intérieur d'une commande IMG et indique au client que l'image en question est cliquable.
La valeur du paramètre USEMAP contient l'adresse d'une section MAP
-
qui peut se trouver dans le même document
(auquel cas on le déclare en commençant par #, e.g. "#nom_carte")
-
ou dans un autre document ("URL#nom_de_carte").
<img src="image.gif" usemap="#ancre_de_la_map"/>
<img src="pegase1.gif" usemap="#pegmap"/>
Exemple 10-3: Image cliquable du côté client