HTML area标签技术文档

介绍

<area> 标签是一个用于定义一个区域，用于在图像映射时将图像分成几个区域并分别定义链接。映射的图像用 <img> 标签来定义。可以使用一个 <map> 标签来将一组 <area> 元素打包起来。

语法

使用 <area> 标签需要使用以下属性：

• alt : 定义区域的文本描述。

• coords : 定义区域的坐标 (x1,y1,x2,y2)。
  对于不同的图形，坐标格式不同，如下图所示：

  

• href : 定义链接的目标 URL。

• shape : 定义区域的形状，可以是 “rect”, “circle”, “poly” 之一。

• target : 定义链接的目标。

举例

下面是一个简单的例子展示使用 <area> 标签来完成图像映射的方式。我们采用一个圆形和一个正方形来进行两个区域的划分。

<img src="example_image.jpg" alt="Example Image" usemap="#exampleMap">

<map name="exampleMap">
  <area shape="circle" coords="108,153,70" href="circle.html" alt="Circle">
  <area shape="rect" coords="208,108,291,186" href="square.html" alt="Square">
</map>

这里我们使用了一个 <img> 标签来定义映射的图像，并将其设置为使用 exampleMap 映射。我们使用了 <map> 标签将两个 <area> 元素打包。

第一个区域是一个圆形，我们使用 shape="circle" 属性来定义这个形状。而 coords 属性使用了圆心坐标和半径，即 (x,y,r)。

第二个区域是一个正方形，我们使用 shape="rect" 属性来定义这个形状。而 coords 属性使用了左上角和右下角的坐标，即 (x1,y1,x2,y2)。

注意事项

• <area> 标签必须嵌套在 <map> 标签中。
• shape 属性必须指定为 rect, circle 或 poly 中的一个。
• coords 属性的格式与 shape 属性密切相关，必须使用正确的格式。