HTML - coords 属性_HTML 菜鸟教程

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

<< HTML - content 属性 HTML - data 属性 >>