Nous avons précédemment vu dans la rubrique Débuter dans la création d'un site web comment associer un lien à une image. Mais il est aussi possible d'y associer plusieurs URL, une URL par zone d'image définie.
En effet, une image se mesure en pixels (ou en points), en abscisse (x : largeur) et en ordonnée (y : hauteur). Le point d'origine du repère de coordonnées (0,0) se situe en haut et à gauche de l'image :
Une image cliquable est réalisable par deux méthodes différentes. Nous traiterons la méthode dite "usemap" plus facile à réaliser et à gérer que la méthode "imagemap", qui nécessite l'exécution d'un programme sur le serveur.
La méthode "usemap" est d'autant plus efficace qu'elle minimise les accés au réseau. Comme pour toute autre image, une image cliquable est définie par la balise <img> mais à laquelle on associe l'attribut usemap. En voici la syntaxe :
<img src="image.gif" usemap="#nom">
Ensuite, il est nécessaire de décrire "la carte des coordonnées" entre les balises <map name="nom"> et </map>. Les zones cliquables sont définies entre ces balises par la balise <area> de cette façon :
L'attribut "shape" décrit la forme de la zone cliquable. Celle-ci peut être de trois type :
rectangulaire : remplacer "figure" par "rect". Le rectangle est défini par deux points : le sommet en haut à gauche (x0,y0) et le sommet en bas à droite (x1,y1).
circulaire : remplacer "figure" par "circl". Le cercle est défini par deux points : son centre (x0,y0) et un point situé sur sa circonférence (x1,y1).
polygonale : remplacer "figure" par "poly". Le polygone sera défini par un maximum de 100 vecteurs : on donne les coordonnées de chaque extrémité du vecteur. Les coordonnées seront donc x0,y0,x1,y1,...,xn,yn, n étant le nombre de points que comporte votre polygone - un.
L'attribut "href" peut être remplacé par "nohref" afin de définir une zone neutre (non définie par une url). Voici donc un exemple complet :
En savoir +
