1. Description de la balise HTML <area>

La balise <area> est utilisée dans le cadre de l'élément <map> pour créer des zones cliquables dans une image. Ces zones peuvent être définies sous forme de rectangles, de cercles ou de polygones, et elles sont généralement utilisées pour créer des liens vers différentes parties d'une image ou pour définir des zones interactives dans une carte d'image. La balise <area> est un excellent moyen d'ajouter des fonctionnalités interactives aux images de vos pages web. Utilisez-la avec soin pour améliorer l'expérience utilisateur et l'accessibilité de vos contenus.

Voici comment la balise <area> est structurée :

1. shape : C'est l'attribut obligatoire qui définit la forme de la zone. Il peut avoir les valeurs suivantes : "rect" (rectangle), "circle" (cercle), ou "poly" (polygone).
2. coords : C'est l'attribut obligatoire qui définit les coordonnées de la zone. Les valeurs varient en fonction de la forme :
   1. Pour un rectangle - coords="x1,y1,x2,y2"
   2. Pour un cercle - coords="x,y,radius"
   3. Pour un polygone - coords="x1,y1,x2,y2,x3,y3,..."
3. href : C'est l'attribut obligatoire qui définit l'URL vers lequel le lien mène lorsque la zone est cliquée.
4. alt : C'est l'attribut optionnel qui définit un texte alternatif qui est affiché lorsque la zone est survolée par la souris. C'est généralement utilisé pour l'accessibilité.

2. Exemples d'usages de balise HTML <area>

Voici un exemple concret d'utilisation de la balise <area> :

Dans cet exemple :

1. L'image "plan.jpg": est affichée avec une carte d'image.
2. Trois zones cliquables: sont définies avec des formes différentes (rectangle, cercle et polygone) en utilisant la balise <area>.
3. Chaque zone : est liée à une page HTML différente et a un texte alternatif pour l'accessibilité.
4. Assurez-vous d'inclure l'élément <map>: avec un attribut name correspondant pour lier les zones <area> à la carte d'image.

Younes Derfoufi
CRMEF OUJDA