Aller au contenu

Balise HTML <map>

La balise <map> est utilisée pour spécifier une image cliquable, avec des zones actives sur lesquelles vous pouvez cliquer pour obtenir plus d’informations. Les zones cliquables de l’image cliquable sont définies à l’aide de la balise <area>, imbriquée dans la balise <map>.

La balise <map> est utilisée pour associer la balise <img> à une image cliquable côté client, ce qui signifie que le navigateur est responsable de l’interprétation du code et du rendu de l’image cliquable. Pour créer une relation entre l’image et la carte, l’attribut name requis est utilisé avec la balise <map>, et l’attribut usemap avec la balise <img>.

Syntaxe

La balise <map> se présente par paires. Le contenu est écrit entre les balises ouvrante (<map>) et fermante (</map>).

Exemple de la balise HTML <map> :

Balise HTML <map>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo items to watch it closer:</p>
    <img src="https://fr.w3docs.com/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
    </map>
  </body>
</html>

Attributs

AttributesValueDescription
namemapnameDéfinit le nom d’une image cliquable.

L’élément <map> utilise également les attributs globaux.

Practice

What is true about the HTML <map> tag as described on the linked web page?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.