HTML <map>-Tag
Das <map>-Tag wird verwendet, um eine Image-Map mit aktiven Bereichen festzulegen, auf die Sie klicken können, um weitere Informationen zu erhalten. Die anklickbaren Bereiche in der Image-Map werden mit dem Tag <area> definiert, das im <map>-Tag verschachtelt ist.
Das <map>-Tag wird verwendet, um das Tag <img> mit einer clientseitigen Image-Map zu verbinden. Das bedeutet, dass der Browser für die Codeauswertung und das Rendern der Image-Map verantwortlich ist. Um eine Beziehung zwischen dem Bild und der Map herzustellen, wird das erforderliche Attribut name mit dem <map>-Tag und das Attribut usemap mit dem <img>-Tag verwendet.
Syntax
Das <map>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<map>) und dem schließenden (</map>) Tag geschrieben.
Beispiel für das HTML-<map>-Tag:
HTML <map> Tag
<!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://de.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>Attribute
| Attribute | Wert | Beschreibung |
|---|---|---|
| name | mapname | Legt den Namen einer Image-Map fest. |
Das <map>-Element verwendet außerdem die Global Attributes.
Übung
Was ist laut der verlinkten Webseite über das HTML-<map>-Tag wahr?