Jusqu'ici, une image, point d' appel d'un lien, ne correspondqu'à une seule cible. Cependant HTML permet de découper uneimage en zones sensibles la recouvrant totalement oupartiellement, chacune étant associée à une cible. Les zonespeuvent se recouvrir en partie mutuellement ; dans la partie enrecouvrement, la première zone définie prime sur les autres. Unclic sur l'image, active la cible associée à la zone touchée.On obtient ainsi une image réactive ou cliquable ou à référence.
Pour définir une image réactive, il faut prévoir :
Le plan des zones sensibles est mémorisé dans la page et l'association(point désigné, zone sensible, cible) est calculée en local.
attribut : USEMAP = "étiquette du plan" mis dans le marqueur IMG d'insertion de l'image
Balladez votre souris sur la figure - en 3 endroits différents il y a des liens
Image cliquable obtenue par le texte source suivant :
insertion de l'image avec indication du plan à utiliser:
<img src="merou.jpg" usemap="#zonessensibles" >
plan des zones :
<MAP name="zonessensibles"><AREA nohref shape="poly" coords="26, 111, 51, 163, 4, 163">
<AREA href="lecrb.htm" shape="rect" coords="8, 8,50, 55" alt="fond gris pour le rectangle">
<AREA href="lecrc.htm" shape="circle" coords="122, 42, 40" alt="fond jaune pour le cercle">
<AREA href="lecrd.htm" shape="poly" coords="102, 126, 154, 143, 180, 113, 171, 160, 116, 161"
alt="fond vert pour le polygone">
<AREA href="lecre.htm" shape="default" alt="fond magenta pour le fond de l'image"></MAP>
Remarques :
Le plan des zones sera enregistré dans un fichier .map sur
leserveur. C'est aussi ce dernier qui calculera la cible désignéepar
l'utilisateur, à partir des coordonnées du point
choisitransmises par le butineur.
Du rôle essentiel joué par le serveur il s'ensuit que la définitiondu
plan dépendra du type de serveur : Windows NT, Novell, NCSA,CERN.
. .
Paramètres pour créer le fichier "plan de l'image" qui sera enregistré sur le serveur (valables pour serveurs Windows NT et NCSA) :
Le marqueur IMG est inséré dans un marqueur de liens <A> </A> et prend un attribut ISMAP :
<A HREF="nom_URL_du_script suivi du nom_URL_du_fichier_plan_des_zones">
<IMG SRC="nom_URL_de_l'image" ISMAP> </A>
Remarques :
<A HREF="imreac.map">< IMG SRC="../imagecom/imreac.gif" ISMAP></A>