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

 


UP PREVIOUS NEXT -- TIE