HTML - coords 属性

HTML coords 属性用于设置图像地图中区域的坐标。

它与 shape 属性一起使用，以指定区域的大小、形状和位置。区域左上角的坐标为 (0,0)。如果 shape 设置为默认值，则 <area> 元素中不使用 coords 属性。

语法

<area coords = "coordinates_values">

以下是 coords 属性的值和说明

coords 值	描述
x1, y1, x2, y2	指定矩形左上角和右下角的坐标 (shape = "rect")。
x, y, radius	指定圆的坐标和半径 (shape = "circle")。

应用于

以下列出的元素允许使用 HTML coords 属性

元素	描述
<area>	HTML <area> 标签指定图像的可点击区域，即可以通过超链接链接到的活动区域。

HTML coords 属性示例

下面的例子将说明 HTML coords 属性的用法以及我们应该在哪里以及如何使用它！

定义图像中的可点击区域

在下面的示例中，我们使用图像 <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="#tutorials" />
    <map name="tutorials">
      <area shape="rect" coords="31,101,164,157" 
            alt="HTML Tutorial" 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="#tutorials" />
    <map name="tutorials">
   <area shape = "poly"  coords = "74,0,113,29,98,72,52,72,38,27"
         href = "/perl/index.htm"  alt = "Perl Tutorial"  
         target = "_blank">
      
   <area shape = "rect"  coords = "22,83,126,125"  alt = "HTML Tutorial" 
         href = "/html/index.htm"  target = "_blank">
      
   <area shape = "circle"  coords = "73,168,32"  alt = "PHP Tutorial" 
         href = "/php/index.htm"  target = "_blank">
   </map>
</body>

</html>

如何获取图像的坐标

以下是获取图像坐标的步骤

在画图应用程序中打开任何图像。
单击“调整大小”，并将调整大小单位从百分比更改为像素。
在 HTML 中为您的图像指定相同的像素宽度和高度。
突出显示图像该部分的左上角，您将在画图应用程序的左下角看到以 px 表示的坐标 (x1, y1)。
突出显示图像该部分的右下角，您将在画图应用程序的左下角看到以 px 表示的坐标 (x2, y2)。

支持的浏览器

属性
coords	是	是	是	是	是

html_attributes_reference.htm

打印页面