HTML的area标签
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
属性密切相关,必须使用正确的格式。