<area>: 图像地图区域元素

基线 广泛可用

此功能已得到很好的建立,并且可在许多设备和浏览器版本上运行。它已在 2015 年 7 月的各浏览器中提供 2015 年 7 月.

**<area>** HTML 元素定义图像地图内具有预定义可点击区域的区域。图像地图 允许将图像上的几何区域与 超文本链接 相关联。

此元素仅在 <map> 元素内使用。

试试看

属性

此元素的属性包括 全局属性

alt

在不显示图像的浏览器中显示的文本字符串替代项。文本应措辞得当,以便向用户提供与显示图像时相同的选项。仅当使用 href 属性时,此属性才为必需。

coords

coords 属性详细说明了 shape 属性的坐标,即 <area> 的大小、形状和位置。如果 shape 设置为 default,则此属性不能使用。

  • rect: 值为 x1,y1,x2,y2。该值指定矩形左上角和右下角的坐标。例如,在 <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> 中,坐标为 0,0253,27,分别指示矩形的左上角和右下角。
  • circle: 值为 x,y,radius。该值指定圆心坐标和半径。例如:<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
  • poly: 值为 x1,y1,x2,y2,..,xn,yn。该值指定多边形边缘的坐标。如果第一个和最后一个坐标对不相同,浏览器将添加最后一个坐标对以关闭多边形

这些值是 CSS 像素数。

download

如果存在此属性,则表示作者希望将超链接用于下载资源。有关 <a>download 属性的完整描述,请参阅。

href

区域的超链接目标。它的值为有效的 URL。此属性可以省略;如果是这样,则 <area> 元素不表示超链接。

ping

包含以空格分隔的 URL 列表,当跟随超链接时,浏览器将在后台发送带有正文 PINGPOST 请求(在后台)。通常用于跟踪。

referrerpolicy

一个字符串,指示在获取资源时使用哪个推荐人

  • no-referrer: 不会发送 Referer 标头。
  • no-referrer-when-downgrade: 不会向没有 TLS (HTTPS) 的 发送 Referer 标头。
  • origin: 发送的推荐人将限制为推荐页面的源:它的 方案主机端口
  • origin-when-cross-origin: 发送到其他源的推荐人将限制为方案、主机和端口。同一源上的导航仍将包括路径。
  • same-origin: 将为 同一源 发送推荐人,但跨源请求将不包含任何推荐人信息。
  • strict-origin: 仅当协议安全级别保持不变(HTTPS→HTTPS)时才将文档的源发送为推荐人,但不要将其发送到安全性较低的目的地(HTTPS→HTTP)。
  • strict-origin-when-cross-origin (默认): 在执行同一源请求时发送完整的 URL,仅当协议安全级别保持不变(HTTPS→HTTPS)时才发送源,并且不向安全性较低的目的地(HTTPS→HTTP)发送任何标头。
  • unsafe-url: 推荐人将包括源路径(但不包括 片段密码用户名)。此值不安全,因为它会将源和路径从 TLS 保护的资源泄露到不安全的源。
rel

对于包含 href 属性的锚点,该属性指定目标对象与链接对象之间的关系。该值是一个空格分隔的链接类型列表。这些值及其语义将由某个权威机构注册,该机构可能对文档作者有意义。如果未指定其他关系,则默认关系为空。仅当存在 href 属性时才使用此属性。

形状

关联热点区域的形状。HTML 规范定义了以下值:rect,定义矩形区域;circle,定义圆形区域;poly,定义多边形区域;default,表示除定义形状之外的整个区域。

目标

用于显示链接资源的 浏览上下文 的关键字或作者定义的名称。以下关键字具有特殊含义

  • _self(默认):在当前浏览上下文中显示资源。
  • _blank:在新的无名浏览上下文中显示资源。
  • _parent:如果当前页面位于框架内,则在当前浏览上下文的父浏览上下文中显示资源。如果没有父级,则与 _self 相同。
  • _top:在最顶层浏览上下文中显示资源(与当前浏览上下文相关联的祖先浏览上下文,且没有父级)。如果没有父级,则与 _self 相同。

仅当存在 href 属性时才使用此属性。

注意:<area> 元素上设置 target="_blank" 隐式提供与设置 rel="noopener" 相同的 rel 行为,后者不设置 window.opener。有关支持状态,请参见 浏览器兼容性

示例

html
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right" />
</map>
<img
  usemap="#primary"
  src="https://dummyimage.com/350x150"
  alt="350 x 150 pic" />

结果

技术概述

内容类别 流内容短语内容
允许的内容 无;它是一个 空元素
标签省略 必须具有开始标签,且不能具有结束标签。
允许的父级 任何接受 短语内容 的元素。<area> 元素必须具有祖先 <map>,但它不需要是直接父级。
隐式 ARIA 角色 href 属性存在时为 link,否则为 generic
允许的 ARIA 角色 不允许使用 role
DOM 接口 HTMLAreaElement

规范

规范
HTML 标准
# the-area-element

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。