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 |