Parcelles de html
Client-Side Imagemaps
par Jacqueline
Dousson, SIC
Un rappel: la norme actuellement en cours pour le langage HTML (HyperText
Markup Language) est la version HTML 3.2 recommandée par le Consortium
W3C . Elle est décrite en détails sur le site du Consortium:
http://www.w3.org/pub/WWW/TR/REC-html32.html.
Parmi les possibilités offertes par la norme, il en est une que
vous ne connaissez peut-être pas et qui est pourtant bien utile,
les client-side imagemaps.
Server-side imagemaps
Classiquement, les images actives (IMAGEMAP) contiennent:
un fichier image (etoile.gif)
un fichier de coordonnées
-
où sont associées les zones de l'image et les URL correspondantes:
etoile.map
-
format général de ce fichier:
forme URL coordonnées
-
[où forme peut valoir «default», «circle»,
«rect» ou «poly»].
-
Dans notre cas le fichier etoile.map contient les informations suivantes
(les coordonnées correspondent aux formes en pointillé):
default rien.html
circle O.html 28,22,13
rect A.html 93,70,117,95
poly etoile.html43,127,54,129,59,121,65,
129,76,127,68,137,75,145,63,144,59,154,42,
145,49,138
-
Les coordonnées entrées dans ce fichier sont en pixels,
l'origine étant le sommet en haut à gauche de l'image, la
première valeur correspond à la coordonnée horizontale,
la seconde à la verticale. Pour circle, il faut entrer les
coordonnées du centre et la valeur du rayon, pour rect les
coordonnées des sommets haut-gauche et bas-droit du rectangle, pour
poly les coordonnées de tous les points du polygone.Vous
récupérez ces coordonnées avec le programme xv
par exemple sous UNIX. Il existe aussi des outils d'aide à la
création d'imagemaps (MapEdit) qui vous simplifient la vie en créant
de façon interactive le fichier .map.
un nom de référence
-
pour l'image cliquable, il faut en général passer par
l'administrateur du serveur pour définir cette correspondance dans
le fichier imagemap.conf situé avec les fichiers de
configuration du serveur:
-
etoile: etoile.map
L'appel à l'image active se fait dans une page HTML quelconque,
de la façon suivante:
<A HREF="/cgi-bin/imagemap/etoile">
<IMG SRC="etoile.gif" ISMAP></A>
Cette solution entraîne un dialogue entre le client (sur votre poste
de travail) et le serveur (la machine où se trouvent tous ces fichiers).
client-side imagemaps
La solution prévue dans HTML 3.2 qui s'appelle «client-side
imagemaps» est plus efficace puisque toute l'information nécessaire
pour naviguer à partir de l'image est présente sur le client.
Notamment, les URL de destinations des différentes zones de l'image
sont visibles en bas de la fenêtre en passant dessus avec la souris,
comme avec un lien hypertexte classique... et donne ainsi une indication
utile avant même d'effectuer la sélection. Autre intérêt:
on peut ainsi utiliser des images cliquables en local (sur un CD-ROM par
exemple, sans la présence d'un serveur httpd).
Cette méthode est plus facile à mettre en place car tout
est décrit dans la page html grâce à la marque MAP.
Exemple:
<IMG SRC="etoile.gif" usemap="#etoile">
<MAP name="etoile">
<area href=rien.html shape=default>
<area href=O.html shape=circle coords="28,22,13">
<area href=A.html shape=rect coords="93,70,117,95">
<area href=etoile.html shape=poly coords="43,127,54,129,59,121,65,129,76,127,68,137,75,
145,63,144,59,154,42,145,49,138">
</MAP>
Les coordonées correspondent à la même syntaxe que
dans la méthode précédente.