<map>: 图像映射标签

最后更新：2026-10-13

<map>图像映射标签

定义客户端图像映射，内部通过 <area> 划分多个可点击区域，再与 <img> 的 usemap 属性配合生效。

<map name="planet">
  <area shape="circle" coords="..." href="...">
</map>

该元素支持全局属性及以下专有属性：

属性	值	描述
`name`		映射名称，的 usemap 用 #名称关联它。

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<map>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： map 自身不显示任何内容，必须配合带 usemap 的 <img> 与若干 <area> 才有意义。

Qmap 必须配合什么元素使用？

A<map> 是热区容器，配合一张 <img usemap='#mapid'> 和若干 <area> 使用：img 的 usemap 指向 map 的 name（带 # 号），map 里的 area 定义各热区。三者缺一不可。

Qmap 的 name 和 id 有什么区别？

Ausemap 属性引用的是 map 的 name 值（规范同时要求设置相同的 id 以保证兼容）。两个属性写成一样的值最稳妥：<map name='cn' id='cn'>。

Q图片热区方案现在还推荐吗？

A小范围仍有价值（插画交互、复古老地图），但主流方案已被「多个定位元素叠加在图片上」或 SVG 内嵌链接取代——SVG 缩放自适应、热区可独立样式化，维护成本低得多。新交互图优先考虑 SVG。

更多案例即将上线，敬请期待。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。