Tag HTML <map>

Le tag <map> est utilisé pour créer une carte d’image. Pour déterminer les zones actives (coordonnées, forme, dimensions, etc.) de la carte-image, le tag <area> est utilisée. Lorsque vous cliquez sur la zone active de l'image, une action spécifique se produit, par exemple, une transition vers une page contenant des informations détaillées.

Le tag <area> est toujours place dans le tag <map>. Les zones actives peuvent être superposés, dans ce cas, lorsque vous cliquez dessus, la zone située dans le code HTML ci-dessus est activée.

Le tag <map> est également utilisé avec l'élément <img> pour l'associer à la carte image client. Pour cela, un identifiant unique est utilisé, qui dans la balise <img> est spécifié par l'attribut usemap et dans la balise <map>, par l'attribut name.

En HTML5, Si l'élément <map> possède un attribut global id, il doit alors avoir la même valeur que l'attribut name.

Syntaxe

Le tag HTML <map> est apparié, le contenu est écrit entre les tags ouvrant (<map>) et fermant (</map>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p>Cliquez sur le logo ou sur l'un des éléments du logo pour le voir de plus près:</p>
    <img src="/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

Attribut Valeur Description
name mapname Un attribut obligatoire. Définit un nom à la carte d’image. Le tag est connecté à l’attribut usemap de l’élément <img>, qui crée un connexion entre l’image et la carte.

Le tag <map> supporte également les Attributs globaux .


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées