HTML <area> shape 屬性

HTML <area> 標簽

定義和用法

shape 屬性規定區域的形狀。

shape 屬性與 coords 屬性 一起使用來規定區域的大小、形狀和位置。

實例

使用 shape 屬性指定圖像映射中每個區域的形狀：

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.html" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.html" alt="Venus">
</map>

親自試一試

語法

<area shape="default|rect|circle|poly">

屬性值

值 描述
default 規定整個區域。
rect 定義矩形區域。
circle 定義圓形區域。
poly 定義多邊形區域。

詳細解釋：

shape 屬性用于定義圖像映射中對鼠標敏感的區域的形狀：

  • 圓形（circ 或 circle）
  • 多邊形（poly 或 polygon）
  • 矩形（rect 或 rectangle）

shape 屬性的值會影響瀏覽器對 coords 屬性的解釋。如果未使用 shape 屬性，那么會假設使用值 default。依照標準，default 意味著該區域覆蓋整個圖像。在實際中，瀏覽器默認使用矩形區域，并期望能找到 4 個 coords 值。如果沒有指定形狀，而且在標簽中也沒有包括 4 個坐標，那么瀏覽器會忽略整個區域。

可以識別 shape 屬性的 default 值的瀏覽器，可以提供一個包括全部熱點的區域，以用于在超過其他熱點定義的范圍之外單擊的情況。由于區域在 <map> 標簽中是采用“先來先得”的順序，所有必須將默認區域放置在后面。否則，默認區域會覆蓋其他的圖像映射中出現的所有區域。

瀏覽器在形狀名稱的實現方面沒有嚴格要求。例如，對于矩形，Netscape 4 不能識別 "rectangle"，卻能識別 "rect"。出于這個原因，我們建議使用縮寫的名稱。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <area> 標簽