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

列印頁面