10. Images cliquables

Exemple 10-1: Image Map

• ../../code/xhtml-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"

<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

• ../../code/xhtml-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>

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