w3docs logo
Quelle balise HTML est utilisée pour créer une carte d'image ?
Commencer le Quiz - "HTML - Les bases"

L'utilisation de la balise HTML <map> pour créer une carte d'image

La balise HTML est utilisée pour définir une carte d'image. Une carte d'image est une image graphique liée de différentes zones à différentes destinations. En d'autres termes, elle permet de rendre différentes parties d'une image cliquables tout en dirigeant vers des URL distinctes.

Le terme "carte d'image" peut sembler un peu déroutant, mais c'est simplement une façon de dire que l'image peut agir comme une carte, menant les utilisateurs vers différentes destinations en fonction de l'endroit où ils cliquent.

Comment utiliser la balise <map>

La balise utilise l'attribut "name" pour identifier la carte d'image. Les balises sont ensuite utilisées pour définir les zones cliquables de la carte d'image. Chaque balise doit avoir les attributs "shape" et "coords" pour spécifier la forme et les coordonnées de la zone cliquable. La balise est associée à la balise en utilisant l'attribut "usemap".

Voici un exemple simple:

<img src="plan.jpg" alt="Plan" usemap="#mapplan">
<map name="mapplan">
  <area shape="rect" coords="34,44,270,350" alt="Bureau" href="bureau.html">
  <area shape="rect" coords="290,172,333,250" alt="Salon" href="salon.html">
</map>

Dans cet exemple, deux zones rectangulaires de l'image "plan.jpg" sont définies comme étant cliquables. L'une mène vers la page "bureau.html" et l'autre vers la page "salon.html".

Bonnes pratiques et conseils supplémentaires

Tout en utilisant la balise , il est recommandé d'inclure toujours un texte de remplacement avec l'attribut "alt" dans chaque balise . Cela aidera les utilisateurs qui ne peuvent pas voir l'image à comprendre où chaque lien les mènera.

Il est également important de noter que la balise n'est pas la même que la balise . La balise n'existe pas en HTML, la bonne balise à utiliser pour afficher une image est . De plus, la balise n'est pas non plus valide.

En résumé, la balise est un excellent outil pour ajouter plus de fonctionnalités à vos images et améliorer l'expérience utilisateur sur votre site web.

Related Questions

Trouvez-vous cela utile?