On veut dresser la carte de la patate, à ce que je vois.
C'est possible, via un code HTML de ce genre :
<img src="url-de-ta-patate.jpg" alt="Patate" width="100" height="100" usemap="#carte-patate" />
<map id="carte-patate">
<area href="url-du-lien.html" alt="Description du lien" shape="poly" coords="10,0,15,8,75,23,87,89,10,0" />
</map>
L'attribut usemap de l'élément IMG a pour valeur l'ancre correspondant à l'attribut id de l'élément MAP à utiliser. L'élément MAP regroupe toutes les zones cliquables qu'on peut trouver dans l'élément qui l'utilise.
L'élément AREA permet de définir une zone cliquable, son attribut href indique l'URL du lien (comme pour A), son attribut alt décrit la zone (très important lorsque les images sont désactivées ou lorsqu'on est un utilisateur aveugle), son attribut shape indique le type de zone (rect pour une zone rectangulaire, circle pour une zone circulaire, poly pour une zone à forme géométrique complexe), son attribut coords indique les coordonnées des différents points de la forme géométrique délimitant la zone.
Les coordonnées sont notées, comme suit :
- pour shape="rect" : l'abscisse du coin supérieur gauche du rectangle, l'ordonnée du coin supérieur gauche, l'abscisse du coin inférieur droit, l'ordonnée du coin inférieur droit (exemple : coords="0,0,468,60") ;
- pour shape="circle" : le centre de la forme circulaire en abscisse, le centre en ordonnée, le rayon (exemple : coords="120,120,60") ;
- pour shape="poly" : l'abscisse du premier point, l'ordonnée du premier point, l'abscisse du deuxième point, l'ordonnée du deuxième point, et ainsi de suite pour finir en répétant l'abscisse et l'ordonnée du premier point, pour que la forme soit fermée (exemple : coords="0,0,468,60, 675,126,877,544,1024,768,0,0") ;
Les coordonnées sont exprimées en pixels, l'origine étant le coin supérieur gauche de l'image.
Pour rappel, abscisse = axe horizontal (x) et ordonnée = axe vertical (y).
Plus de détails sur la
spécification HTML du W3C (
version française).
Bref, la maintenance des zones cliquables peut vite tourner au casse-tête, étant donné qu'il faut bien maîtriser la surface de l'image et ses dimensions.
