HTMLImageElement: useMap 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

HTMLImageElement 接口上的 useMap 属性反映了 <img> HTML 元素的 usemap 属性的值，该属性是一个字符串，用于指定要应用于图像的客户端图像映射的名称。

值

一个字符串，提供要应用于图像的图像映射所定义的 <map> 元素的页面局部 URL（即，以哈希或磅符号 # 开头的 URL）。

您可以在我们的学习文章在图像上添加热点图中了解更多关于客户端图像映射的信息。

用法说明

useMap 的字符串值必须是 <map> 元素的有效锚点。换句话说，该字符串应在前面加上一个磅或哈希符号，作为相应 <map> 元素的 name 属性的值。

考虑一个如下所示的 <map>：

html

<map name="mainmenu-map">
  <area
    shape="circle"
    coords="25, 25, 75"
    href="/index.html"
    alt="Return to home page" />
  <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop" />
</map>

给定名为 mainmenu-map 的图像映射，使用它的图像应如下所示：

html

<img src="menubox.png" usemap="#mainmenu-map" />

有关更多示例（包括交互式示例），请参阅有关 <map> 和 <area> 元素的文章，以及使用图像映射的指南。

示例

试一试

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://mdn.org.cn/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://mdn.org.cn/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://mdn.org.cn/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://mdn.org.cn/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://mdn.org.cn/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info.png"
  alt="MDN infographic" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;
}

规范

规范
HTML # dom-img-usemap

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 4 月 23 日，作者是 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误