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.
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
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
