10. Images cliquables

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">

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">