HTML <area> coords 属性

在网页开发中，我们经常会使用到图片地图（image map）来实现在图片上点击不同区域后跳转到不同的链接或执行不同的操作。而在定义图片地图时，我们需要使用到 <area /> 元素来定义不同区域的点击范围。其中，<area /> 元素的 coords 属性用来定义区域的坐标。

什么是 <area /> 元素？

<area /> 元素是用来定义图片地图中的可点击区域的元素。它必须嵌套在 <map> 元素内，<map> 元素则是用来定义图片地图的容器。在 <area /> 元素中，coords 属性用来定义区域的坐标，根据不同的 shape 属性值，coords 的值也有所不同。

coords 属性的语法

coords 属性的值取决于 shape 属性的值，不同的 shape 属性对应不同的坐标值。下面是 coords 属性的语法：

• circle：coords="x,y,r"
• rect：coords="x1,y1,x2,y2"
• poly：coords="x1,y1,x2,y2,x3,y3,..."

circle 形状

当 shape 属性值为 circle 时，coords 属性的值表示一个圆形区域的坐标。其中，x 和 y 表示圆心的坐标，r 表示圆的半径。

示例代码：

<map name="circlemap">
  <area shape="circle" coords="50,50,30" href="https://www.example.com">
</map>

rect 形状

当 shape 属性值为 rect 时，coords 属性的值表示一个矩形区域的坐标。其中，x1 和 y1 表示矩形的左上角坐标，x2 和 y2 表示矩形的右下角坐标。

示例代码：

<map name="rectmap">
  <area shape="rect" coords="20,20,80,80" href="https://www.example.com">
</map>

poly 形状

当 shape 属性值为 poly 时，coords 属性的值表示一个多边形区域的坐标。坐标值需要按照顺序连接起来，每一对坐标值表示一个顶点的坐标。

示例代码：

<map name="polymap">
  <area shape="poly" coords="10,10,50,20,30,40" href="https://www.example.com">
</map>

总结

通过使用 <area /> 元素的 coords 属性，我们可以定义图片地图中不同区域的点击范围，从而实现更加丰富的交互效果。在实际开发中，我们可以根据需要选择合适的 shape 属性值和对应的坐标值来定义图片地图的点击区域。希望本文对你理解 HTML <area /> coords 属性有所帮助！