HTML <area> 标签


示例

具有可点击区域的图片映射:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
亲自试一试 »

下面有更多 "亲自试一试" 示例。


定义和用法

这个<area>标签定义图片映射内的区域(图片映射是具有可点击区域的图片)。

<area>元素总是嵌套在 a 内<map>标签。

笔记:这个usemap属性在<img><map>元素的 name属性,并创建图片和地图之间的关系。


浏览器支持

Element
<area> Yes Yes Yes Yes Yes


属性

Attribute Value Description
alt text Specifies an alternate text for the area. Required if the href attribute is present
coords coordinates Specifies the coordinates of the area
download filename Specifies that the target will be downloaded when a user clicks on the hyperlink
href URL Specifies the hyperlink target for the area
hreflang language_code Specifies the language of the target URL
media media query Specifies what media/device the target URL is optimized for
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url
Specifies which referrer information to send with the link
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Specifies the relationship between the current document and the target URL
shape default
rect
circle
poly
Specifies the shape of the area
target _blank
_parent
_self
_top
framename
Specifies where to open the target URL
type media_type Specifies the media type of the target URL

全局属性

这个<area>标签还支持HTML 中的全局属性


事件属性

这个<area>标签还支持HTML 中的事件属性


更多示例

示例

另一个图片地图,带有可点击区域:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
亲自试一试 »

相关页面

HTML DOM 参考:区域对象


默认 CSS 设置

大多数浏览器都会显示<area>具有以下默认值的元素:

area {
  display: none;
}