HTML - coords 屬性

HTML coords 屬性用於設定影像地圖中區域的座標。

它與 shape 屬性一起使用，以指定區域的大小、形狀和位置。區域左上角的座標為 (0,0)。如果 shape 設定為預設值，則 <area> 元素中不使用 coords 屬性。

語法

<area coords = "coordinates_values">

以下是 coords 屬性的值和說明

coords 值	描述
x1, y1, x2, y2	指定矩形左上角和右下角的座標 (shape = "rect")。
x, y, radius	指定圓的座標和半徑 (shape = "circle")。

應用於

以下列出的元素允許使用 HTML coords 屬性

元素	描述
<area>	HTML <area> 標籤指定影像的可點選區域，即可以透過超連結連結到的活動區域。

HTML coords 屬性示例

下面的例子將說明 HTML coords 屬性的用法以及我們應該在哪裡以及如何使用它！

定義影像中的可點選區域

在下面的示例中，我們使用影像 <area> 元素中的 HTML ‘coords’ 屬性來設定影像中區域的座標。在輸出螢幕上，單擊黃色區域將跳轉到 HTML 頁面。

<!DOCTYPE html>
<html>

<head>
    <title>HTML coords attribute</title>
</head>

<body>
    <img src="html/images/rect.jpg" alt="Rectangle" 
         border="0" usemap="#tutorials" />
    <map name="tutorials">
      <area shape="rect" coords="31,101,164,157" 
            alt="HTML Tutorial" href="/html/index.htm" 
            target="_blank">   
    </map>
</body>

</html>

在一個影像中定義多個可點選區域

這裡我們在單個影像中定義三個不同的區域，單擊時將相應地跳轉。

<!DOCTYPE html>
<html>

<head>
    <title>HTML area Tag</title>
</head>

<body>
    <img src="/images/usemap.gif" alt="usemap" border="0" 
         usemap="#tutorials" />
    <map name="tutorials">
   <area shape = "poly"  coords = "74,0,113,29,98,72,52,72,38,27"
         href = "/perl/index.htm"  alt = "Perl Tutorial"  
         target = "_blank">
      
   <area shape = "rect"  coords = "22,83,126,125"  alt = "HTML Tutorial" 
         href = "/html/index.htm"  target = "_blank">
      
   <area shape = "circle"  coords = "73,168,32"  alt = "PHP Tutorial" 
         href = "/php/index.htm"  target = "_blank">
   </map>
</body>

</html>

如何獲取影像的座標

以下是獲取影像座標的步驟

在畫圖應用程式中開啟任何影像。
單擊“調整大小”，並將調整大小單位從百分比更改為畫素。
在 HTML 中為您的影像指定相同的畫素寬度和高度。
突出顯示影像該部分的左上角，您將在畫圖應用程式的左下角看到以 px 表示的座標 (x1, y1)。
突出顯示影像該部分的右下角，您將在畫圖應用程式的左下角看到以 px 表示的座標 (x2, y2)。

支援的瀏覽器

屬性
coords	是	是	是	是	是

html_attributes_reference.htm

列印頁面