UP PREVIOUS NEXT   Technologies Internet et Education, © TECFA
  10. Images cliquables

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:

  1. le traitement nécessaire est effectué par le client.
  2. une routine du côté du serveur (rarement utilisée)

10.1 "Client-side" Maps

Exemple 10-1: Image Map

A. Principe:

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

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

(auquel cas on le déclare en commençant par #, e.g. "#nom_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

 

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

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

UP PREVIOUS NEXT -- TIE