Les images "clicables"
-
Il s'agit de définir, pour une image donnée, des zônes
"sensibles" qui agiront comme des hyper-liens.
-
Exemple:
-
La norme HTML 3.2 a entériné la façon de procéder
de Netscape, à savoir que la définition et l'utilisation des
zônes sensibles d'une image peuvent se faire à des emplacements
très éloignés dans le même document, voire dans
deux documents séparés:
- l'image en elle-même est déclarée comme n'importe quelle autre image, avec la marque <img ...> à laquelle on rajoute l'attribut usemap="xxx", où xxx a la même syntaxe qu'un point d'ancrage (EventuelleURL#UnNom);
- la définition des zônes se fait à l'aide de la marque <map name="UnNom"> suivie d'un certain nombre de marques <area ...> et terminée par la marque de fin </map>.
-
chaque marque <area ...> correspond à une
zône spécifique de l'image à laquelle va correspondre
un hyper-lien. Pour cela, il faut définir un certain nombre d'attributs
à la marque <area ...>:
- l'attribut shape indique la forme de la zône et peut valoir "poly", "rect" ou "circle"
- l'attribut href donnera l'URL du document vers lequel on veut aller; pour définir une zône inactive; on peut mettre à la place l'attribut nohref
-
l'attribut coords sera une succession de valeurs
numériques entières indiquant les contours de la forme choisie
(en pixels):
- pour un rectangle, 4 valeurs indiquant les coordonnées x et y du coin supérieur gauche et du coin inférieur droit
- pour un cercle, 3 valeurs indiquant les coordonnées x et y du centre et la dimension du rayon
- pour un polygone, 2n valeurs indiquant les coordonnées x et y des n points du polygone
- l'attribut alt permet de fournir un texte qui correspondra à la zône, pour le cas où le programme de visualisation n'est pas capable d'afficher du graphique
-
l'ordre des marques <area ...> a de l'importance,
dans la mesure où il y aurait recouvrement entre les différentes
zônes déclarées. Les zônes sont examinées
dans l'ordre où elles sont déclarées et la première
qui peut contenir le point désigné par l'utilisateur sera
utilisée pour suivre son éventuel hyper-lien. On peut ainsi
facilement rajouter une marque <area shape="rect" coords="0,0,
MaxX, MaxY" href="..."> (où
MaxX et MaxY sont les valeurs numériques correspondant
à la dimension de l'image) à la fin de la série, qui
recouvre la totalité de l'image, pour traiter toutes les zônes
résiduelles qui n'auraient pas été spécifiées
par les marques <area ...> précédentes.
-
La norme 3.0 prévoyait une marque <fig> qui
permettait de faire ce que les marques <img>,
<map> et <area> permettent
dans la norme 3.2. La marque <fig> sera probablement
réintroduite plus tard.
-
L'exemple vu plus haut correspond au code HTML suivant:
<IMG ISMAP BORDER="0" ALIGN="Top" SRC="../gif/bertrand.75x102.gif" ALT="" USEMAP="#bertrand75x102" WIDTH="73" HEIGHT="96">
<MAP NAME="bertrand75x102">
<AREA SHAPE="poly" HREF="Map/Col.html" COORDS="29,95, 20,87, 16,82, 10,89, 6,95, 29,95">
<AREA SHAPE="poly" HREF="Map/Fond.html" COORDS="50,96, 63,79, 68,63, 68,51, 72,50, 72,95, 50,96">
<AREA SHAPE="poly" HREF="Map/Fond.html" COORDS="9,88, 5,95, 0,95, 0,0, 72,0, 72,31, 63,13, 49,1, 33,2, 20,10, 3,33, 3,56, 9,73, 9,88">
<AREA SHAPE="poly" HREF="Map/Cheveux.html" COORDS="66,39, 67,50, 71,50, 71,48, 71,32, 62,13, 49,2, 32,3, 20,11, 4,33, 4,55, 10,74, 10,87, 16,80, 20,86, 21,85, 21,68, 16,68, 12,59, 11,48, 14,44, 17,43, 18,34, 28,26, 58,22, 67,31, 66,39">
<AREA SHAPE="poly" HREF="Map/Bouche.html" COORDS="37,70, 37,64, 47,62, 56,62, 62,67, 63,71, 57,73, 45,74, 38,74, 37,70">
<AREA SHAPE="poly" HREF="Map/Front.html" COORDS="28,46, 18,46, 19,34, 28,27, 58,23, 66,31, 66,39, 55,39, 53,42, 51,38, 49,41, 44,38, 32,38, 28,46">
<AREA SHAPE="poly" HREF="Map/Nez.html" COORDS="51,40, 43,57, 43,61, 58,61, 58,57, 51,40">
<AREA SHAPE="poly" HREF="Map/Oreille.html" COORDS="21,54, 18,46, 14,45, 12,49, 12,59, 16,68, 20,68, 22,64, 21,54">
<AREA SHAPE="poly" HREF="Map/Oeil.gauche.html" COORDS="65,49, 63,45, 56,45, 55,48, 58,50, 64,50, 65,49">
<AREA SHAPE="poly" HREF="Map/Oeil.droit.html" COORDS="33,47, 43,48, 44,45, 42,44, 36,43, 32,46, 33,47">
<AREA SHAPE="RECT" HREF="Map/Face.html" COORDS="0,0,72,95"> </MAP> - Personnellement, je préfère conserver les marques <img> et <map> l'une à côté de l'autre dans le même document, à moins que la même image clicable soit utilisée dans plusieurs documents, auquel cas je mets la marque <map> dans un document HTML à part qui ne contient que cela.
RFC 1980: A Proposed Extension to HTML : Client-Side Image Maps.
Bertrand Ibrahim 