HTML <area> coords 屬性

HTML <area> 標簽

定義和用法

coords 屬性規定圖像映射中區域的坐標。

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

提示：區域左上角的坐標為 0,0。

注意：如果某個 area 標簽中的坐標和其他區域發生了重疊，會優先采用最先出現的 area 標簽。瀏覽器會忽略超過圖像邊界范圍之外的坐標。

實例

使用 coords 屬性規定圖像映射中每個區域的坐標：

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

親自試一試

語法

<area coords="value">

屬性值

值 描述
x1,y1,x2,y2 規定矩形左上角和右下角的坐標 (shape="rect")。
x,y,radius 規定圓心的坐標和半徑（shape="circle"）。
x1,y1,x2,y2,..,xn,yn

規定多邊形邊的坐標。

如果第一個和最后一個坐標對不相同，瀏覽器將添加最后一個坐標對來閉合多邊形 (shape="poly")。

詳細解釋：

<area> 標簽的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的坐標。坐標的數字及其含義取決于 shape 屬性中決定的區域形狀。可以將客戶端圖像映射中的超鏈接區域定義為矩形、圓形或多邊形等。

下面列出了每種形狀的適當值：

圓形：shape="circle"，coords="x,y,z"

這里的 x 和 y 定義了圓心的位置（"0,0" 是圖像左上角的坐標），r 是以像素為單位的圓形半徑。

多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

每一對 "x,y" 坐標都定義了多邊形的一個頂點（"0,0" 是圖像左上角的坐標）。定義三角形至少需要三組坐標；高緯多邊形則需要更多數量的頂點。

多邊形會自動封閉，因此在列表的結尾不需要重復第一個坐標來閉合整個區域。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

第一個坐標是矩形的一個角的頂點坐標，另一對坐標是對角的頂點坐標，"0,0" 是圖像左上角的坐標。請注意，定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。

例如，下面的 XHTML 片段在一個 100x100 像素圖像的右下方四分之一處，定義了一個對鼠標敏感的區域，并在圖像的正中間定義了一個圓形區域。

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

瀏覽器支持

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

HTML <area> 標簽