HTML <area> 标签
主题
- 默认模式
- 浅蓝色模式
- 淡绿色模式
- 深夜模式
定义和用法
<area>标签用于定义图像映射中的可点击区域，通常与<map>和<img>标签一起使用。
<area>元素始终嵌套在<map>标签内。
<area>标签的基本语法：
<img src="image.jpg" alt="示例图片" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="x1,y1,x2,y2" href="link.html" alt="描述">
</map>如果两个<area>区域重叠，后面出现的<area>元素会覆盖先定义的（类似CSS的z-index堆叠）
那么怎么精准的选区图像中的区域呢？这里我们使用了image-map来给图像选区。
主要的属性
<area> 元素包含多种属性，能为图像添加交互功能，让用户与图像互动更便捷。
1. 必需属性
shape：定义区域的形状
rect：矩形circle：圆形poly：多边形default：整个图像区域
coords：定义可点击区域的坐标
- 矩形：
x1,y1,x2,y2（左上角和右下角坐标） - 圆形：
x,y,radius（圆心坐标和半径） - 多边形：
x1,y1,x2,y2,...,xn,yn（各个顶点坐标）
href：点击区域后跳转的URL
2. 可选属性
alt：替代文本（对于可访问性很重要）target：指定链接打开方式（如 _blank 在新窗口打开）download：指定下载链接rel：指定链接与当前文档的关系media：指定目标URL为何种媒介/设备优化的
应用实例
下面提供了可点击区域的图像映射实例（为了演示效果，附加了鼠标悬停效果和 title 提示效果）：
<img src="fruit_tree.jpeg" alt="果树" usemap="#fruit" width="500" height="618">
<map name="fruit">
<!-- 柚子区域 -->
<area shape="rect" class="area-trigger" alt="柚子" title="柚子" href="/demo/pomelo.html" coords="203,82,307,152">
<!-- 苹果区域 -->
<area shape="rect" class="area-trigger" alt="苹果" title="苹果" href="/demo/apple.html" coords="322,119,372,166">
<!-- 西瓜区域 -->
<area shape="rect" class="area-trigger" alt="西瓜" title="西瓜" href="/demo/watermelon.html" coords="151,545,220,603">
</map>常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | 文本 | 规定区域的替代文本。如果存在 href 属性则为必需。 |
| coords | 坐标值 | 规定区域的坐标。 |
| download | 文件名 | 规定当用户单击超链接时将下载目标。 |
| href | URL | 规定区域的超链接目标。 |
| hreflang | 语言代码 | 规定目标 URL 的语言。 |
| media | 媒体查询 | 规定目标 URL 优化的媒体/设备。 |
| referrerpolicy |
|
规定要与链接一起发送的引用信息。 |
| rel |
|
规定当前文档和目标 URL 之间的关系。 |
| shape |
|
规定区域的形状。 |
| target |
|
规定在何处打开目标 URL。 |
| type | 媒体类型 | 规定目标 URL 的媒体类型。 |
评论区 0
发表评论
教程介绍
HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法 。
49
章节
271
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈