Une aide pour une carte clicable

Bonjour,

Je fais partie des bénévoles effectuant des recherches généalogiques sur le département de la Nièvre. http://www.gennievre.org/portail/

Nous aurions besoin d'une personne généreuse pour nous aider car nous n'avons pas de compétences sur la création de cartes cliquables (des cartes où chaque zone est un lien et qui peuvent soit ouvrir sur une nouvelle page, soit générer un zoom...)

Merci à ceux et/ou celles qui répondra à ce message.

La création d'une carte cliquable n'est pas compliquée : elle requiert l'utilisation des éléments img, map et area. L'élément img, en plus des habituels attributs src et alt, comporte l'attribut usemap, dont la valeur est une ancre vers l'élément map.

Cet élément map comporte un attribut id dont la valeur détermine l'ancre utilisée par l'attribut usemap, cet attribut étant doublé d'un attribut name (pour une plus grande compatibilité entre les différents navigateurs). L'élément map contient un ou plusieurs éléments area.

L'élément area est vide (tout comme img) et comporte, à l'instar d'img, un attribut alt dont la valeur fait office de texte de lien pour les lecteurs d'écran et les robots des moteurs de recherche ; il comporte également l'attribut href, qui a la même fonction que dans l'élément a ; il comporte un attribut shape, dont les valeurs possibles sont "defaut", "rect", "circle" ou "poly" (selon que la zone occupe la carte entière, est un rectangle, un cercle ou un polygone, respectivement), et un attribut coords, qui permet de spécifier les coordonnées de la zone (si l'attribut shape a une valeur autre que "default").

Pour illustrer mon propos, voici un exemple :

<!-- L'image -->
<img src="chemin/vers/image.png" alt="Le texte qui va bien" width="480" height="60" usemap="#carte" />
<!-- On définit la carte cliquable (la valeur des attributs id et name est celle reprise par l'attribut usemap ci-dessus) -->
<map id="carte" name="carte">
  <!-- Définition d'une zone rectangulaire de 10 pixels de largeur sur 20 de hauteur partant du coin supérieur gauche de l'image -->
  <area alt="Le texte qui va bien pour ce lien 1" href="page1.html" shape="rect" coords="0, 0, 10, 20" />
  <!-- Définition d'une zone circulaire d'un rayon de 30 pixels et dont le centre est situé à 20 pixels du bord supérieur de l'image et à 100 du bord gauche -->
  <area alt="Le texte qui va bien pour ce lien 2" href="page2.html" shape="rect" coords="100, 20, 30" />
  <!-- Définition d'une zone en forme de polygone avec 6 points (on définit donc 6 paires de coordonnées x, y, x pour l'horizontale, y pour la verticale) -->
  <area alt="Le texte qui va bien pour ce lien 3" href="page3.html" shape="poly" coords="352,18, 450, 2, 480, 23, 392, 20, 421, 68, 376, 40" />
</map>

Pour en savoir plus, consulter la section sur les cartes cliquables côté client dans la spécification HTML 4.01 (version française).