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.
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
COORDS="x1,y1,x,y..."
HTML 3.2
[HREF=url]
HTML 3.2
[NOHREF]
HTML 3.2
[ALT=text]
HTML 3.2
[TARGET=cible]
NS 3.0, IE 3.0
[ONMOUSEOUT=Event-Handler]
NS 3.0
[ONMOUSEOVER=Event-Handler]
NS 3.0
<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>
# text
default url
rect (x,y) (x,y) url
circle (x,y) rad url
poly (x,y)...(x,y) url
url
# text
rect url x,y x,y
circle url x,y x,y
oval url x,y x,y
poly url x,y...x,y
point url x,y
default url
url
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 |