HTML coords 属性用于设置图像映射中区域的坐标。
它与 shape 属性一起使用，以指定区域的大小、形状和位置。区域左上角的坐标为 （0,0）。如果形状设置为默认值，则不会在 <area> 元素中使用 coords 属性。
语法
<area coords = "coordinates_values">
适用于
下面列出的元素允许使用 HTML coords 属性
| 坐标值 | 描述 |
|---|---|
|
x1, y1, x2, y2 |
指定矩形的左上角和右下角的坐标 （shape = “rect”）。 |
|
x, y, radius |
指定圆的坐标和半径 （shape = “circle”）。 |
HTML coords 属性的示例
下面的示例将说明 HTML 坐标属性，我们应该在哪里以及如何使用此属性！
| 元素 | 描述 |
|---|---|
| <area> | HTML <area> 标签指定了图像的区域、可以单击的映射或通过超链接链接到的活动区域。 |
定义图像中的可点击区域
在以下示例中，我们在图像 <area> 元素中使用 HTML 'coords' 属性来设置图像中区域的坐标。在输出屏幕中，当您单击黄色区域时，您将重定向到 HTML 页面。
<!DOCTYPE html>
<html>
<head>
<title>HTML coords attribute</title>
</head>
<body>
<img src="html/images/rect.jpg" alt="Rectangle"
border="0" usemap="#Qikepu" />
<map name="Qikepu">
<area shape="rect" coords="31,101,164,157"
alt="HTML Qikepu" href="/html/index.htm"
target="_blank">
</map>
</body>
</html>
在单个图像中定义多个可点击区域
在这里，我们在单个图像中定义了三个不同的区域，当单击时，将相应地重定向
<!DOCTYPE html>
<html>
<head>
<title>HTML area Tag</title>
</head>
<body>
<img src="/images/usemap.gif" alt="usemap" border="0"
usemap="#Qikepu" />
<map name="Qikepu">
<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
href = "/perl/index.htm" alt = "Perl Qikepu"
target = "_blank">
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Qikepu"
href = "/html/index.htm" target = "_blank">
<area shape = "circle" coords = "73,168,32" alt = "PHP QikepuCom"
href = "/php/index.htm" target = "_blank">
</map>
</body>
</html>
如何获取图像的coords 坐标
以下是获取coords 坐标的步骤
- 在 Paint 应用程序上打开任何图像。
- 单击“调整大小”并将调整大小单位从百分比更改为像素。
- 在 HTML 中为您的图像提供相同的像素宽度和高度。
- 突出显示图像的该部分的左上角，您将在绘制应用程序的左下角看到坐标，单位为 px（x1， y1）。
- 突出显示图像的该部分的右下角，您将在绘制应用程序的左下角看到坐标，单位为 px（x2， y2）。
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | Yes | Yes | Yes | Yes | Yes |
