HTML - shape 属性_HTML 菜鸟教程

HTML shape 属性用于指定区域的形状。它与 cords 属性一起使用，以指定区域的大小、形状和位置。

语法


<area shape=" rect | circle " cords=" ">

适用对象

下面列出的元素允许使用 HTML shape 属性。

元素	描述
<area>	HTML <area> 标签指定了图像的区域、可以单击的映射或通过超链接链接到的活动区域。

HTML shape 属性示例

以下示例将说明 HTML shape 属性，我们应该在何处以及如何使用此属性！

具有矩形形状的可点击图像映射

在运行以下代码时，输出窗口将在网页上显示可点击的矩形。当用户单击该矩形时，它会进一步显示另一个矩形。


<!DOCTYPE html>
<html>

<head>
		<title> HTML shape Attribute in area tag</title>
</head>

<body>
		<h2>HTML shape Attribute in area tag</h2>
		<p>Click on the below rectangle to see another rectangle.</p>
		<img src=
"https://i.pinimg.com/originals/98/4a/76/984a7602f2200e18e6a8657722c09385.png" 
				 width="300" 
				 height="119" 
				 usemap="#shapemap" />
		<map name="shapemap">
		<area shape="rect" 
						coords="100, 20, 250, 80" 
						href=
"https://encrypted-tbn0.gstatic.com/images?q=tb:ANd9GcRttgqluhjReBW6EbWI5sdFH8g3TdRa5wzJPrnV_SxAo2HZeema27VZzWtoOYRHYtsty68&usqp=CAU" 
						alt="Square">
		</map>
</body>

</html>

具有圆形的可点击图像映射

在运行以下代码时，输出窗口将在网页上显示可点击的圆圈。当用户点击这个圆圈时，它会进一步显示另一个圆圈。


<!DOCTYPE html>
<html>

<head>
		<title> HTML shape Attribute in area tag</title>
</head>

<body>
		<h2>HTML shape Attribute in area tag</h2>
		<p>Click on the circle below to see another circle.</p>
		<img src=
"https://t4.ftcdn.net/jpg/05/13/51/83/360_F_513518338_WdNSvv9IcRuMX8e5urFsq4UISKivj2vk.jpg" 
				 width="200" 
				 height="200" 
				 usemap="#shapemap" />
		<map name="shapemap">
		<area shape="circle" coords="100, 100, 25" 
						href=
"https://i.pinimg.com/originals/fe/74/02/fe74026279d49724edba9a414bf48240.jpg" 
						alt="Square">
		</map>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - selected 属性 HTML - size 属性 >>