<area>: 图像地图区域元素
试试看
属性
此元素的属性包括 全局属性。
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,0
和253,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
href
-
区域的超链接目标。它的值为有效的 URL。此属性可以省略;如果是这样,则
<area>
元素不表示超链接。 ping
-
包含以空格分隔的 URL 列表,当跟随超链接时,浏览器将在后台发送带有正文
PING
的POST
请求(在后台)。通常用于跟踪。 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" />
结果
技术概述
规范
规范 |
---|
HTML 标准 # the-area-element |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。