Les cartes d'images


Les images cliquables sont aussi appelées Webmaps ou imagemaps. Quand l'utilisateur clique sur l'image, il ouvre un lien différents suivant la zone cliquée. Un carte n'est pas définit de la même manière que le reste d'un document HTML.

Il existe deux grands types de cartes d'images :

La plus simple à mettre en oeuvre, les Client Side Image maps, nécessite un navigateur compatible comme Netscape 2. Elles sont définies à l'intérieur du document HTML et c'est le browser qui calcule le lien de la zone cliquée.

Guère plus compliqué, les Server Side Images maps, nécessite un serveur compatible. Une imagemap coté serveur est l'association de deux fichiers, une image et un fichier de définition de zones. Le fichier de définition des zones doit être écrit au format CERN ou NCSA. Le CERN (Centre d'Etudes et de Recherche Nucléaire) est l'entreprise à l'origine du développement du Web et NCSA (National Center for Supercomputing Application) est l'entreprise qui a créé le premier browser Web, Mosaic. Les cartes utilisent les scripts CGI pour fonctionner. Renseignez vous auprés de l'administrateur pour savoir si le serveur supporte les imagemaps et si c'est le cas, dans quels formats.

Un logiciel comme Mapper permet de créer des Client Side Image maps, sans avoir à écrire la moindre ligne de code.

Client Side ImageMap format

MAP -- (AREA)*
name CDATA #IMPLIED
AREA -O EMPTY
shape %SHAPE rect
coords %COORDS #IMPLIED
href %URL #IMPLIED
nohref (nohref) #IMPLIED
alt CDATA #REQUIRED
%SHAPE "(rect | circle | poly)"
%COORDS "CDATA"

MAP sert de container à la description d'une images possédant plusieurs zones sensibles. Les zones sont définies par des tags AREA séparés, qui sont inclus dans le container MAP. Les containers MAP peuvent se situer à n'importe quel endroit du document HTML. On peut s'y référer grâce à leur nom et à l'URL du fichier correspondant, même distant.
Les objets sont classés par ordre avant-plan vers arrière-plan. Si l'utilisateur clique sur une aire qui n'est pas spécifié comme objet il n'y a aucune action.
Il n'est pas recommandé de faire chevaucher les zones car certains browsers peuvent éprouver des difficultés à les interprétées correctement.

<MAP NAME="text"> HTML 3.2
Débute la définition de la carte. Doit finir avec </MAP>
NAME est le nom de la carte d'image, utilisé par la balise IMG pour la localisée. Voir le chapitre "images", pour plus d'informations. Doit finir avec </MAP>.

<AREA [SHAPE=rect|circ[le]|poly[gon]] COORDS="x,y,x,y" [HREF=url]|[NOHREF] [ALT=text] [TARGET=text] [...]> HTML 3.2
Définit une zone sensible de la carte.

[SHAPE=rect|circ[le]|poly[gon]] HTML 3.2
Définit la forme géométrique de la zone.
RECT ou RECTANGLE (rectangle). Valeur par défaut.
CIRC ou CIRCLE (circle).
POLY ou POLYGON (polygone quelconque).
Il n'y a pas la possibilité de créer des ovales.
COORDS="x1,y1,x,y..." HTML 3.2
Ce sont les coordonnées qui définissent la zone géométrique.
Une zone RECT (rectangle) est définit par les coordonnées des points supérieur gauche et inférieur droit dans l'ordre "gauche,haut,droit,bas".
Une zone CIRCLE (cercle) est définit par les coordonnées de son centre et de son rayon dans l'ordre "centreX,centreY,rayon"
Une zone POLYGON (polygone) est définit par les coordonnées de ses points "x1,y1,x2,y2...,xn,yn" où n est le nombre de points. Le polygone est automatiquement fermé par le premier et dernier point défini.
[HREF=url] HTML 3.2
URL vers laquelle pointe la zone sensible.
[NOHREF] HTML 3.2
Ne provoquera aucune action si l'on clique dans la zone. Il va de soit que si l'on n'utilise pas cet attribut en même temps que l'attribut HREF.
[ALT=text] HTML 3.2
Texte alternatif affiché par le browser si il n'arrive pas à ouvrir l'image. Fonctionne pareil que l'attribut ALT dans la balise IMG. Indispensable pour les navigateurs textuels tels que l'on peut trouver dans certains PDA communiquants.
[TARGET=cible] NS 3.0, IE 3.0
Ouvre le lien dans une fenêtre ou une frame nommé 'cible'. Voir le chapître "frames" pour plus d'informations.
[ONMOUSEOUT=Event-Handler] NS 3.0
Evénement JavaScript devant être appelé lorsque l'utilisateur déplace le pointeur de la souris à l'extérieur de la zone définie.
[ONMOUSEOVER=Event-Handler] NS 3.0
Evénement JavaScript devant être appelé lorsque l'utilisateur déplace le pointeur est en contact avec la zone définie.

Exemple

L'image suivante contient 3 zones définies (un rectangle, un ovale et un triangle) et une zone par défaut. Lorsque vous cliquez sur une zone, le lien s'ouvre dans une frame flottante nommé 'outtest' placé à coté de l'image. Les frames flottantes ne fonctionnant que dans IE 3, le lien sera ouvert dans une nouvelle fenêtre dans les autres browsers.
<MAP name=test>
<AREA Shape=polygon coords="150,9,80,56,153,104" alt=polygone href="test.html#poly" target=outtest>
<AREA Shape=circle coords="120,118,48" alt=cercle href="test.html#circ" target=outtest>
<AREA Shape=rect coords="9,20,103,108" alt=rectangle href="test.html#rect" target=outtest>
</MAP>
<IMG src="imagemap.jpg" width=191 height=175 usemap="#test">

<IFRAME name=outtest width=310 height=70 src=test.html></IFRAME>

polygonecerclerectangle

CERN format

Dans le format CERN, tous les objets sont séparés par un retour à la ligne. La liste des objets commence par l'URL par défaut suivi de la définition des objets ordonnés de l'arrière-plan vers l'avant-plan.
# text
Definit un commentaire non utilisé par le browser.
default url
Définit l'URL par défaut pour les zones non définies. Elle doit être placée en premier.
rect (x,y) (x,y) url
Définit un rectangle
circle (x,y) rad url
Définit un cercle par son centre et son rayon.
poly (x,y)...(x,y) url
Définit un polygones par ses points
url
Adresse du lien.

NCSA format

Dans le format NCSA, tous les objets sont séparés par un retour à la ligne. La liste des objets commence par la définition des objets ordonnés de l'avant-plan vers l'arrière-plan terminé par del'URL par défaut.
# text
Definit un commentaire non utilisé par le browser.
rect url x,y x,y
Définit un rectangle
circle url x,y x,y
Définit un cercle par son centre et un point de sa périphérie.
oval url x,y x,y
Definit un ovale. x,y x,y sont les coordonnées du rectangle entourant l'ovale.
poly url x,y...x,y
Definit un polygone. Chaque 'x,y' définit un point.
point url x,y
Definit un point à x,y.
default url
Définit l'URL par défaut pour les zones non définies. Elle doit être placée en dernier.
url
est l'adresse du lien.

Encore un bug de MSIE 3.01 Mac PPC : lorsque l'on fait suivre un tableau d'un élément centré, alors la dernière ligne de la dernière case du tableau est centré horizontalement !!


Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservés
11 août 1997