HTML area 标签 - 绿叶网

HTML area 语法

在 HTML 中，area 标签常常和 map 标签一起使用，用于创建图片上的 “可点击区域”，这种功能被称为 “图片映射（Image Map）” 。

我们可以把一张图片的某些部分变成链接，当用户点击这些区域时，可以跳转到网页、触发 JavaScript 脚本等操作。

语法：

<map name="地图名称">
    <area href="链接地址" alt="替代文本" shape="形状" coords="坐标">
</map>
<img src="图片路径" usemap="#地图名称">

说明：

对于 map 标签来说，“map 标签的 name 属性” 必须与 “img 标签的 usemap 属性” 一致，以创建图片与映射之间的关系。

对于 area 标签来说，它必须作为子元素嵌套在 map 标签内。area 标签的常用属性有 4 个：

href：定义区域的链接地址。当用户点击该区域时，会跳转到该链接地址。
alt：定义当图片无法显示时的替代文本。
shape：用于定义区域的形状，可选值有 "rect"（默认值）、"circle"、"poly"。
coords：用于定义区域的坐标，格式取决于 shape 属性。
- 当 shape="rect" 时，坐标格式为 “左上角 x 坐标, 左上角 y 坐标, 右下角 x 坐标, 右下角 y 坐标” ，比如：x1, y1, x2, y2。
- 当 shape="circle" 时，坐标格式为 “圆心 x 坐标, 圆心 y 坐标, 半径” ，比如 centerX, centerY, radius。
- 当 shape="poly" 时，坐标格式为各个顶点的 x 坐标和 y 坐标，用逗号分隔，比如：x1, y1, x2, y2, x3, y3, ...。

此外需要清楚的是，area 是一个空标签（也叫 “自闭合标签”）。在 HTML5 中，下面 2 种写法都是可行的：

<!--写法 1 -->
<area href="链接地址" alt="替代文本" shape="形状" coords="坐标">

<!--写法 2 -->
<area href="链接地址" alt="替代文本" shape="形状" coords="坐标" />

提示: 手动计算 coords 坐标是非常繁琐的。在实际开发中，我们通常使用在线工具（可以搜索 "Online Image Map Generator"）来通过鼠标框选区域，自动生成对应的代码。

HTML area 摘要

属于	HTML 图片
使用频率	低
兼容性	查看
官方文档	查看
MDN	查看

HTML area 示例

接下来，我们通过一个简单的例子来讲解一下 HTML area 标签是如何使用的。

示例：area 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <img usemap="#frontend" src="./imgs/html-css-js.jpg" alt="">
        <map name="frontend">
            <area shape="rect" coords="35,205,195,365" alt="html" href="https://www.lvyenet.com/html">
            <area shape="rect" coords="205,205,365,365" alt="css" href="https://www.lvyenet.com/css">
            <area shape="rect" coords="120,35,280,195" alt="javascript" href="https://www.lvyenet.com/javascript">
        </map>
    </div>
</body>
</html>

页面效果如下图所示。

HTML area标签示例

分析：

当我们点击图片中的不同区域时，就会跳转到相应的链接。需要注意的是，map 标签的 name 为 "frontend"，此时 img 标签 usemap 属性值应该写成 "#frontend"，而不能写成 "frontend"。

area 标签和 a 标签非常相似，它也支持 target 属性。比如可以使用 target="_blank" 来以新窗口的方式打开链接。