HTML - 圖片地圖

圖片地圖

HTML 圖片地圖 由<map>標籤定義。圖片地圖使影像的特定區域可點選，充當指向不同目標的連結。此技術可用於在網頁上建立複雜的導航系統或互動式圖形。

透過在影像內定義各種形狀（矩形、圓形和多邊形），每個形狀都有其自己的關聯連結，開發人員可以建立動態且互動式的視覺內容，從而增強使用者參與度和導航體驗。

圖片地圖的用途

圖片地圖可用於建立複雜的導航、互動式圖表或引人入勝的視覺體驗，從而增強網頁的使用者參與度和互動性。

它可用於透過在影像中定義可點選區域來建立互動式圖形。這允許使用者與影像的不同部分進行互動，從而觸發特定操作或連結。

HTML <map> 標籤

<map> 標籤用於建立客戶端影像地圖，將影像的特定區域轉換為互動式元素。這允許使用者點選影像的不同區域，從而觸發各種操作。<map> 元素用作 <area> 元素的容器，每個 <area> 元素都定義了一個具有特定屬性的可點選區域。

語法

以下是 <map> 標籤的語法：

<map name="world map">
   <!-- Define your clickable areas here -->
</map>

與 <img> 標籤結合使用時，<map> 標籤會在影像及其關聯地圖之間建立連線。這使 Web 開發人員能夠透過在影像中定義不同的可點選區域來建立動態且互動式的內容。

在圖片地圖中定義區域（形狀）

<area> 標籤用於在 <map> 標籤內定義影像上的可點選區域。它指定每個可點選區域的形狀、座標和關聯操作。

以下是 <area> 標籤的語法：

<area shape="shape_values" coords="coordinates" href="url" alt="Description">

1. 矩形區域

您可以透過為 shape 屬性賦值 rect 來定義矩形形狀。矩形形狀需要左上角和右下角的座標，您可以在 coords 屬性中定義。

語法

<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Description">

x1, y1 - 左上角的座標。
x2, y2 - 右下角的座標。

2. 圓形區域

您可以透過為 shape 屬性賦值 circle 來定義圓形形狀。圓形形狀需要中心座標（x，y）和半徑（r），您可以在 coords 屬性中定義。

<area shape="circle" coords="x,y,r" href="url" alt="Description">

x, y - 圓心的座標。
r - 圓的半徑。

3. 多邊形區域

您可以透過為 shape 屬性賦值 poly 來定義多邊形形狀。多邊形形狀需要一系列座標來構成形狀，您可以在 coords 屬性中定義。

這可以用來建立任何形狀，無論是芒果還是蘋果。

語法

<area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" href="url" alt="Description">

其中 x1, y1,..., xn, yn 座標構成多邊形。

這些形狀可以建立互動式圖片地圖，透過將不同的操作與影像內的特定區域關聯來增強使用者參與度。

在 HTML 中建立圖片地圖

要在 HTML 中建立圖片地圖，請按照以下步驟操作並檢視程式碼示例：

步驟 1：準備您的影像

從您要用作圖片地圖的影像開始。在本例中，我們將使用名為 logo.png 的影像檔案。

在 <img> 標籤中使用 usemap 屬性，透過將其值設定為 <map> 的 name 屬性來將影像連結到 <map> 標籤。

<img src="/images/logo.png" usemap="#image_map">

步驟 2：定義圖片地圖

使用 <map> 標籤定義圖片地圖，並使用 name 屬性為其指定一個唯一的名稱。

<map name="image_map">
</map>

步驟 3：定義可點選區域

在 <map> 元素內，使用 <area> 標籤定義可點選區域。指定形狀（rect、circle 或 poly）、座標以及要連結到的 URL。

<map name="image_map">
  <area shape="circle" coords="45,32,49" href="index.htm" alt="tutorialspoint">
  <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" alt="tutorials_library">
</map>

對要在影像中建立的每個可點選區域重複**步驟 3**。最後，關閉 HTML 檔案並將其儲存為 .html 副檔名。

HTML 圖片地圖示例

此示例建立一個 HTML 圖片地圖，其中影像 (logo.png) 上的特定區域使用 <map> 元素內的 <area> 標籤連結到不同的頁面。

<!DOCTYPE html>
<html>
<head>
   <title>Image Map Example</title>
</head>
<body>
   <img src="/images/logo.png" usemap="#image_map">
   <map name="image_map">
      <!-- Define your clickable areas here -->
      <area shape="circle" coords="45,32,49" href="/index.htm" alt="tutorialspoint">
      <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" alt="tutorials_library">
   </map>
</body>
</html>

列印頁面