HTML | 坐标属性

在HTML中，元素可以用于为图像映射指定可点击区域。 元素有一个名为“coords”的属性，该属性允许您指定与相关联的图像区域的坐标。这使得元素成为图像映射的关键组件。

格式

元素具有以下格式：

<area shape="shape" coords="coordinates" href="url" alt="description">

• shape: 指定区域的形状。可能的值包括“rect”（矩形），“circle”（圆形）和“poly”（多边形）。

• coords: 指定区域的坐标。根据不同的形状，此属性可以采用不同的格式。

• href: 当用户单击区域时，指定要链接到的URL。

• alt: 当图像无法显示时，提供替代描述文本。

坐标格式

矩形

如果的形状为“rect”，则“coords”属性应采用以下格式：

"x1, y1, x2, y2"

其中x1和y1是左上角的坐标，x2和y2是右下角的坐标。

圆形

如果的形状为“circle”，则“coords”属性应采用以下格式：

"x, y, radius"

x和y是圆心的坐标，radius是圆的半径。

多边形

如果的形状为“poly”，则“coords”属性应采用以下格式：

"x1, y1, x2, y2, x3, y3, ..., xn, yn"

其中每一对坐标代表多边形的一个顶点。多边形的最后一个顶点应连接到第一个顶点。

例子

下面是一个具有两个元素的示例。第一个定义了一个矩形区域，第二个定义了一个圆形区域。

<img src="example.jpg" usemap="#example-map">

<map name="example-map">
  <area shape="rect" coords="0,0,50,50" href="http://www.example.com/1" alt="Link 1">
  <area shape="circle" coords="100,100,50" href="http://www.example.com/2" alt="Link 2">
</map>

总结

元素是为图像映射指定可点击区域的重要组件。通过使用“coords”属性，可以指定与相关联的图像区域的坐标。 根据不同的形状，此属性可以在矩形，圆形和多边形之间采用不同的格式。