Area shape 属性

什么是 Area shape 属性

shape 属性用于定义 <area> 元素的可点击区域的形状。shape 属性的值可以是以下几种形状之一：

• rect：矩形
• circle：圆形
• poly：多边形

如何使用 Area shape 属性

矩形（rect）

要创建一个矩形的可点击区域，可以使用 shape="rect" 属性，并且通过 coords 属性指定矩形的左上角和右下角坐标。例如：

<img src="example.jpg" usemap="#map1" />
<map name="map1">
  <area shape="rect" coords="0,0,100,100" href="example.html" alt="Example" />
</map>

上面的代码中，我们创建了一个左上角坐标为 (0, 0)，右下角坐标为 (100, 100) 的矩形可点击区域。

圆形（circle）

要创建一个圆形的可点击区域，可以使用 shape="circle" 属性，并且通过 coords 属性指定圆心坐标和半径。例如：

<img src="example.jpg" usemap="#map2" />
<map name="map2">
  <area shape="circle" coords="50,50,50" href="example.html" alt="Example" />
</map>

上面的代码中，我们创建了一个圆心坐标为 (50, 50)，半径为 50 的圆形可点击区域。

多边形（poly）

要创建一个多边形的可点击区域，可以使用 shape="poly" 属性，并且通过 coords 属性指定多边形各个顶点的坐标。例如：

<img src="example.jpg" usemap="#map3" />
<map name="map3">
  <area shape="poly" coords="0,0,100,0,100,100,0,100" href="example.html" alt="Example" />
</map>

上面的代码中，我们创建了一个四边形的可点击区域，各个顶点的坐标分别为 (0, 0)、(100, 0)、(100, 100)、(0, 100)。

总结

通过 shape 属性和 coords 属性，我们可以轻松地创建各种形状的可点击区域，从而实现更加丰富多彩的图形交互效果。在实际开发中，我们可以根据具体需求选择合适的形状来创建可点击区域，从而提升用户体验和页面交互性。