HTML - shape 属性

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>

支持的浏览器

属性
shape	是	是	是	是	是

html_attributes_reference.htm

打印页面