10. Images cliquables

Une image cliquable permet de présenter des menus graphiques en plus des liens textuels.

Définir une image cliquable revient à définir des zones sensibles (rectangulaires, circulaires ...) et des actions correspondant à chacune d'entre elles.

Il existe plusieurs façons de traiter les actions de l'utilisateur sur une image:

10.1 "Client-side" Maps

Exemple 10-1: Image Map

../../code/html-intro/imagemap-ex.html

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"

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"

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"

Pour les cercles:

les coordonnées du centre et la valeur du rayon sont nécessaires (3 nombres).

COORDS="l,k,p"

Pour les polygones:

on donne les coordonnées pour chaque point

COORDS="x1,y1,x2,y2,x3,y3,...,...."

HREF

contient l'URL qui est chargé lorsque l'utilisateur clique sur une des zones sensibles.

HREF="URL" où URL est une adresse WWW

Exemple 10-2: Définition des zones d'une image cliquable

../../code/html-intro/imagemap-ex.html .

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

Exemple 10-3: Image cliquable du côté client

10.2 "Server-side" Maps (ISMAP) ... à titre indicatif

Définir un lien qui contient l'image et introduire ISMAP dans la commande d'image.
Créer un fichier *.map sur le serveur qui contient les coordonnées des zones sensibles.

Exemple 10-4: Utilisation d'un server-side script pour le traitement d'une image cliquable

<a href="../cgi-bin/imagemap/test">

<img scr="../test.gif" ISMAP>

</a>

Le fichier test.map contient les éléments suivants (syntaxe pour les serveurs NCSA):

default /~jermann/garbage.html

rect http://tecfa.unige.ch/~jermann/garbage.html#staf11 7,7 144,144

rect http://tecfa.unige.ch/~jermann/garbage.html#staf12 148,7 280,144

rect http://tecfa.unige.ch/~jermann/garbage.html#staf13 281,7 420,144

rect http://tecfa.unige.ch/~jermann/garbage.html#staf14 7,145 144,280