HTML 中的 <area> 元素用于定义图像映射的可点击区域,通常与 <map> 元素一起使用。<area> 元素可以定义矩形、圆形或多边形等不同形状的区域,以便用户可以在图像的不同部分执行不同的操作。
属性
<area> 元素支持以下常用属性:
alt: 定义区域的替代文本,当图像无法显示时将显示这段文本。coords: 定义区域的坐标,具体取决于不同形状的区域。href: 定义区域被点击时要跳转的链接地址。shape: 定义区域的形状,可以是 "rect"(矩形)、"circle"(圆形)或 "poly"(多边形)。target: 定义链接的打开方式,如在新窗口中打开。
示例
以下是一个使用 <area> 元素创建图像映射的示例:
-- -------------------- ---- -------
--------- -----
------
------
------------ --- ---------------
-------
------
---- ----------------- -------------- ------------ ----- ---- --
---- ------------
----- ------------ ------------------ ----------------- --------- -- --
----- -------------- ------------------- ----------------- --------- -- --
----- ------------ -------------------------------- ----------------- --------- -- --
------
-------
-------在上面的示例中,我们创建了一个图像映射,分别定义了一个矩形区域、一个圆形区域和一个多边形区域,并为每个区域指定了对应的链接地址。用户可以点击不同的区域来跳转到不同的页面。
<area> 元素在网页开发中常用于创建交互性强的图像地图,可以为用户提供更丰富的浏览体验。
| 属性 | 描述 | W3C |
|---|---|---|
| alt | 设置或返回当浏览器无法显示某个区域时的替换文字。 | Yes |
| coords | 设置或返回图像映射中可点击区域的坐标。 | Yes |
| hash | 设置或返回某个区域中 URL 的锚部分。 | Yes |
| host | 设置或返回某个区域中 URL 的主机名和端口。 | Yes |
| hostname | 设置或返回href属性值得主机部分。 | Yes |
| href | 设置或返回某个区域中href属性值 | Yes |
| noHref | 设置或者返回某个区域的 nohref 属性值。 | Yes |
| pathname | 设置或者返回某个区域 href 属性值的路径名部分。 | Yes |
| port | 设置或者返回某个区域 href 属性值的端口部分。 | Yes |
| protocol | 设置或者返回某个区域 href 属性值的协议部分。 | Yes |
| search | 设置或者返回某个区域 href 属性值的查询字符串部分。 | Yes |
| shape | 设置或者返回某个区域 shape属性值。 | Yes |
| target | 设置或者返回某个区域 target 属性值。 | Yes |