HTML <map> Tag

Definition und Verwendung

<map> Tag benötigt, um die Bildkarte zu definieren. Eine Bildkarte (Image Map, eine Art Partitionierungs-Navigationskarte) ist ein Bild mit klickbaren Bereichen.

<map> das Element ein name-Attributdieses Attribut ist mit <img>-Element von usemap-Attribut verknüpfte Elemente, die eine Beziehung zwischen Bild und Karte erstellen.

<map> enthält einige <area>-Element，definiert den klickbaren Bereich in der Bildkarte.

Siehe auch:

HTML DOM Referenzhandbuch:Map-Objekt

Beispiel

Beispiel 1

Eine Bildkarte mit klickbaren Bereichen:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Try It Yourself

Beispiel 2

Eine andere Bildkarte mit klickbaren Bereichen:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Try It Yourself

Attribute

Attribute Value Description
name Map Name Required. Specifies the name of the image map.

Global Attributes

<map> The tag also supports Global Attributes in HTML.

event attributes

<map> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display with the following default values: <map> Element:

map {
  display: inline;
{}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support