HTML <area> 标签
示例
带有可点击区域的图像地图，点击下面电脑，咖啡和手机，进入不同的页面：
<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="a.html"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="abbr.html"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="address.html"> </map>
定义和用法
<area> 标签定义了图像映射中的一个区域（图像映射是具有可点击区域的图像）。
<area> 元素总是嵌套在 <map> 标签内。
注意： <img> 中的 usemap 属性与 <map> 元素的 name 属性相关联，并在图像和地图之间建立关系。
浏览器支持
| Element |
|
|
|
|
|
|---|---|---|---|---|---|
| <area> | Yes | Yes | Yes | Yes | Yes |
属性
| 属性 Attribute | 值 Value | 描述 Description |
|---|---|---|
| alt | text | 指定区域的替代文本。 如果存在 href 属性，则为必需 |
| coords | coordinates | 指定区域的坐标 |
| download | filename | 指定当用户单击超链接时将下载目标 |
| href | URL | 指定区域的超链接目标 |
| hreflang | language_code | 指定目标 URL 的语言 |
| media | media query | 指定目标 URL 优化的媒体/设备 |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
指定与链接一起发送的推荐人信息 |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
指定当前文档和目标 URL 之间的关系 |
| shape | default rect circle poly |
指定区域的形状 |
| target | _blank _parent _self _top framename |
指定打开目标 URL 的位置 |
| type | media_type | 指定目标 URL 的媒体类型 |
全局属性
<area> 标签支持 HTML 中的全局属性。
事件属性
<area> 标签支持 HTML 中的事件属性。
更多示例
另一个带有可点击区域的图像地图：
<img src="https://user-images.githubusercontent.com/1680273/165700877-949e520a-c085-40ce-abd4-2996da31f33b.png" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="a.html" alt="Sun"> <area shape="circle" coords="90,58,3" href="address.html" alt="Mercury"> <area shape="circle" coords="124,58,8" href="applet.html" alt="Venus"> </map>
默认 CSS 设置
大多数浏览器将显示具有以下默认值的 <area> 元素：
area {
display: none;
}