HTML <area>形状属性介绍

HTML中的<area>标签用于定义图像映射（image map）中的可点击区域，通过指定区域的形状属性，可以创建不同形状的可点击区域。本文将介绍<area>标签的形状属性以及如何使用它们来定义不同形状的区域。

1. 形状属性

<area>标签支持以下三种形状属性：

• rect：矩形形状（默认）。使用该属性时，需要指定左上角和右下角的坐标值。

• circle：圆形形状。使用该属性时，需要指定圆心的坐标以及半径。

• poly：多边形形状。使用该属性时，需要指定多边形各个顶点的坐标。

以下是一个基本的<area>标签示例：

<area shape="rect" coords="x1,y1,x2,y2" href="URL">

在上面的示例中，shape属性用于指定区域的形状，coords属性用于指定区域的坐标，href属性用于指定点击区域跳转的链接。

2. 使用矩形形状

当shape属性设置为"rect"时，需要使用coords属性指定左上角和右下角的坐标值。

<area shape="rect" coords="x1,y1,x2,y2" href="URL">

其中，x1和y1表示矩形左上角的坐标，x2和y2表示矩形右下角的坐标。

3. 使用圆形形状

当shape属性设置为"circle"时，需要使用coords属性指定圆心的坐标以及半径。

<area shape="circle" coords="x,y,radius" href="URL">

其中，x和y表示圆心的坐标，radius表示圆的半径。

4. 使用多边形形状

当shape属性设置为"poly"时，需要使用coords属性指定多边形各个顶点的坐标。

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="URL">

其中，x1, y1, x2, y2, ...表示多边形各个顶点的坐标。

5. 示例

以下是一个包含多个点击区域的图像映射的例子：

<img src="image.jpg" alt="image" usemap="#map">

<map name="map">
    <area shape="rect" coords="10,10,100,100" href="url1">
    <area shape="circle" coords="50,150,40" href="url2">
    <area shape="poly" coords="180,50,220,80,180,110,140,80" href="url3">
</map>

在上面的例子中，<img>标签用于显示图像，并使用<map>标签定义图像映射。每个<area>标签定义一个可点击区域，分别使用不同的形状属性和坐标值。

注意：<area>标签必须嵌套在<map>标签中，并且需要为<map>标签指定一个name属性，与<img>标签中的usemap属性相对应。

以上就是HTML <area>形状属性的介绍。通过使用不同的形状属性和坐标值，你可以创建各种形状的可点击区域，实现更丰富交互的图像映射效果。