HTML <map> 元素

HTML <map> 元素与 <area> 元素一起用于定义图像映射（可点击的链接区域）。

带有可点击区域的图像映射：

<img src="/examples/planets.gif" width="145" height="126" alt="行星" usemap="#planetmap">
<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="/examples/sun.htm" alt="Sun">
 <area shape="circle" coords="90,58,3" href="/examples/mercur.htm" alt="Mercury">
 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

尝试一下 »

特性

内容类别 流式内容，短语内容，可触知内容。
允许的内容 任何透明内容模型元素。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
允许的 ARIA 角色 无
DOM 接口 HTMLMapElement

属性

该元素包含了全局属性。

name

name 属性为地图赋予一个名称，以便引用它。该属性必须存在，并且必须不为空的值，不带空格。 name 属性的值不能与同一文档中另一个 map 元素的 name 属性值的相同（忽略大小写匹配）。如果还指定了 id 属性，则两个属性必须具有相同的值。

事件属性

<map> 元素支持所有 HTML事件属性。

更多实例

体验点击 <map> 的效果

<map name="primary">
  <area shape="circle" coords="75,75,75" href="javascript:alert('左边');">
  <area shape="circle" coords="275,75,75" href="javascript:alert('右边');">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 图片">

尝试一下 »

截图

体验点击 <map> 的效果

上述实例应与以下图像类似（使用键盘标签键时）：

点击左边的链接

点击右边的链接

规范

规范 状态 备注
HTML Living Standard
<map> 的定义		 现行的标准 -
HTML5
<map> 的定义		 推荐 -
HTML 4.01 Specification
<map> 的定义		 推荐 初始定义

HTML 4.01 与 HTML5 之间的差异

在 HTML5 中, 如果 id 属性在 <map> 标签中指定, 则您必须同样指定 name 属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，name 属性已经废弃，使用 id 属性替换它。

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 1 支持 112 支持 1 1
name 1 支持 1 支持 1 1

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 1 1 支持 1 支持 支持 支持
name 1 1 支持 1 支持 支持 支持

1. 在 Firefox 5 之前的怪异模式（quirks mode）下，空的映射在匹配时会被略过。

2. 在 Firefox 17 之前，<map> HTML 元素的默认样式是 display: block;。现在是 display: inline;，这与其他浏览器的行为相匹配，之前在怪异模式下已经是这样。

第一点可参考以下的 HTML：

<map></map>
<map>
  <area shape="rect" coords="25,25,75,75" href="#fail">
</map>
<img usemap="#a" src="image.png">

相关链接