圖片映射將圖片劃分成多個可點擊區域，每個區域可以連結至不同目的地。
例如，平面圖可以分別為課室、圖書館及接待處提供連結。
HTML 圖片映射使用三個元素：
| 元素 | 用途 |
|---|---|
<img> | 顯示圖片，並參照對應的映射 |
<map> | 定義區域集合 |
<area> | 定義個別區域及其連結 |
只有在空間關係能幫助讀者理解內容時，才使用圖片映射。 應提供有意義的連結替代文字，以及通往相同目的地的一般文字連結。
16.1 基本結構
圖片透過 usemap 屬性參照映射：
<img
src="images/learning-centre.png"
alt="學習中心平面圖"
width="600"
height="300"
usemap="#centre-map"
>
<map name="centre-map">
<area
shape="rect"
coords="40,40,240,180"
href="#classroom"
alt="課室資料"
>
</map>兩者的連接方式是：
- 圖片使用
usemap="#centre-map"。 - 映射使用
name="centre-map"。
井號應放在 usemap 中，不是放在映射的 name 中。
單靠 id 不能取代所需的映射名稱：
<map name="centre-map" id="centre-map">
<!-- 在這裏加入區域。 -->
</map>如果 <map> 同時具有 name 和 id，應使用相同的值。
16.2 <map> 元素
<map> 將圖片的互動區域組合起來：
<map name="facility-map">
<area
shape="rect"
coords="20,20,180,140"
href="classroom.html"
alt="課室"
>
<area
shape="rect"
coords="220,20,380,140"
href="library.html"
alt="圖書館"
>
</map>每個映射應有非空、唯一，而且不包含空白的名稱。
映射本身不會繪製外框、標籤或按鈕。這些視覺元素必須已存在於圖片中，或透過其他方式提供。
16.3 <area> 元素
<area> 定義一個區域：
<area
shape="rect"
coords="40,40,240,180"
href="classroom.html"
alt="課室資料"
>重要屬性包括：
| 屬性 | 用途 |
|---|---|
shape | 區域形狀 |
coords | 區域座標 |
href | 連結目的地 |
alt | 連結區域的替代文字 |
target | 目的地的瀏覽環境 |
rel | 連結關係 |
<area> 是空元素，沒有結束標籤。
當區域具有 href 時，應提供適當的 alt，說明目的地或用途。
沒有 href 的區域不會建立超連結。
16.4 理解座標
座標從圖片左上角開始計算：
- 水平座標向右增加。
- 垂直座標向下增加。
實際製作時，應使用已知的圖片顯示尺寸，並按該尺寸量度區域。
coords 包含以逗號分隔的數字：
coords="40,40,240,180"不要加入 px 或百分號。
不同形狀需要不同的座標格式。
16.5 矩形區域
使用 shape="rect" 定義矩形：
<area
shape="rect"
coords="40,40,240,180"
href="#classroom"
alt="課室資料"
>四個值依次表示：
- 左邊界。
- 上邊界。
- 右邊界。
- 下邊界。
這個區域從距離圖片左側及頂部各 40 像素的位置，延伸至距離左側 240 像素、頂部 180 像素的位置。
矩形適合課室、面板及其他方框形狀的內容。
16.6 圓形區域
使用 shape="circle" 定義圓形：
<area
shape="circle"
coords="350,110,60"
href="#reception"
alt="接待處資料"
>三個值依次表示：
- 圓心水平位置。
- 圓心垂直位置。
- 半徑。
這個圓形的圓心位於水平位置 350、垂直位置 110，半徑為 60 像素。
16.7 多邊形區域
使用 shape="poly" 定義不規則多邊形：
<area
shape="poly"
coords="450,40,570,40,550,180,470,160"
href="#library"
alt="圖書館資料"
>每對數值定義一個頂點：
450,40570,40550,180470,160
瀏覽器會連接各頂點，並自動封閉多邊形。
應按邊界次序列出頂點，避免意外形成互相交叉的邊。
16.8 預設區域與重疊
預設區域覆蓋整張圖片：
<area
shape="default"
href="#overview"
alt="學習中心概覽"
>它不需要 coords。
當區域重疊時，文件次序中第一個符合位置的區域會取得優先權。
因此，如果預設連結用來處理其他區域未涵蓋的位置，應將它放在特定區域之後：
<map name="centre-map">
<area
shape="rect"
coords="40,40,240,180"
href="#classroom"
alt="課室資料"
>
<area
shape="default"
href="#overview"
alt="學習中心概覽"
>
</map>避免非預期的重疊，否則連結可能難以按預期啟動。
16.9 替代文字與無障礙功能
圖片及區域的替代文字各有不同職責。
<img
src="images/centre-plan.png"
alt="學習中心平面圖，設有通往設施資料的連結"
width="600"
height="300"
usemap="#centre-map"
>圖片的 alt 說明整體圖片。
每個連結區域的 alt 則識別目的地：
<area
shape="rect"
coords="40,40,240,180"
href="#classroom"
alt="課室資料"
>避免以下替代文字：
- 「矩形」。
- 「按此」。
- 「區域 1」。
讀者需要知道連結的用途，而不只是區域形狀。
也應提供一般文字連結：
<ul>
<li><a href="#classroom">課室資料</a></li>
<li><a href="#reception">接待處資料</a></li>
<li><a href="#library">圖書館資料</a></li>
</ul>這些連結方便無法輕鬆使用視覺映射的讀者。
16.10 鍵盤與觸控操作
具有連結的區域可以參與鍵盤導覽。應測試實際網頁，不要假設操作體驗一定清晰。
檢查以下事項：
- 每個目的地都可以不用滑鼠到達。
- 焦點清晰可見，而且容易理解。
- 區域次序合理。
- 區域大小足以舒適地啟動。
- 一般文字連結仍然可用。
不同瀏覽器對不規則區域的焦點外框可能有不同呈現。不要只依靠自訂 CSS 令圖片映射可用。
重要指引不應只在滑鼠懸停時提供，因為觸控使用者可能沒有懸停操作。
16.11 響應式圖片映射
傳統圖片映射使用固定座標。不要假設 CSS 調整圖片大小時，座標也會自動按比例縮放。
例如：
img {
max-width: 100%;
height: auto;
}這適合一般圖片，但固定座標映射可能在圖片縮小後出現位置錯配。
可考慮以下方式：
- 保持圖片的製作尺寸，並提供可捲動容器。
- 使用經過仔細實作的 JavaScript 重新計算座標。
- 改用一般連結或響應式連結 SVG 等設計。
如果使用 JavaScript 調整座標，應從原始座標計算，不要反覆縮放已修改的值。
使用 object-fit 裁切圖片可能造成更多位置問題。應測試所有預期尺寸及版面。
對許多響應式介面而言，清楚標示的卡片清單比圖片映射更簡單。
16.12 完整範例：學習中心圖片映射
以下獨立範例嵌入附有標籤的插圖，並定義矩形、圓形及多邊形連結。
圖片保持製作時的尺寸，讓座標維持對齊。在窄螢幕上，容器可以水平捲動；一般文字連結則提供另一種導覽方式。
id: hong-kong-html-image-maps
name: 圖片映射 — 學習中心平面圖
type: html
content: |-
<!doctype html>
<html lang="zh-Hant-HK">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圖片映射 | 學習中心平面圖</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #222;
background: #f5f7fa;
font-family: system-ui, sans-serif;
line-height: 1.8;
}
main {
max-width: 46rem;
margin-inline: auto;
padding: 2rem 1rem;
}
h1,
h2 {
color: #005ea8;
line-height: 1.4;
}
figure {
margin: 1.5rem 0;
padding: 1rem;
border: 1px solid #767676;
border-radius: 0.5rem;
background: white;
}
.map-scroll {
max-width: 100%;
overflow-x: auto;
}
.map-image {
display: block;
width: 600px;
height: 300px;
max-width: none;
}
figcaption {
margin-block-start: 1rem;
}
a {
color: #005ea8;
text-decoration: underline;
text-underline-offset: 0.2em;
}
a:focus-visible,
.map-scroll:focus-visible {
outline: 3px solid #005ea8;
outline-offset: 4px;
}
.facility {
margin-block: 1.5rem;
padding: 1.25rem;
border: 1px solid #767676;
border-radius: 0.5rem;
background: white;
}
.facility h2 {
margin-block-start: 0;
}
.facility > :last-child {
margin-block-end: 0;
}
.note {
padding: 1rem;
border-inline-start: 4px solid #005ea8;
background: #eaf2f8;
}
[id] {
scroll-margin-block-start: 1rem;
}
</style>
</head>
<body>
<main>
<h1 id="page-heading">學習中心平面圖</h1>
<p>
選擇附有標籤的區域，
或使用下方文字連結閱讀各項虛構設施的資料。
</p>
<p id="map-help">
窄螢幕上可以水平捲動平面圖。
你也可以直接使用下方的設施文字連結。
</p>
<figure>
<div
class="map-scroll"
role="region"
aria-label="學習中心平面圖捲動區"
aria-describedby="map-help"
tabindex="0"
>
<img
class="map-image"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%23edf1f5'/%3E%3Crect x='40' y='40' width='200' height='140' fill='%23eaf2f8' stroke='%23005ea8' stroke-width='3'/%3E%3Ccircle cx='350' cy='110' r='60' fill='%23fff3d6' stroke='%23805a00' stroke-width='3'/%3E%3Cpolygon points='450,40 570,40 550,180 470,160' fill='%23e4f3e9' stroke='%2326673e' stroke-width='3'/%3E%3Cg font-family='sans-serif' font-size='20' text-anchor='middle' fill='%23222'%3E%3Ctext x='140' y='115'%3E%E8%AA%B2%E5%AE%A4%3C/text%3E%3Ctext x='350' y='117'%3E%E6%8E%A5%E5%BE%85%E8%99%95%3C/text%3E%3Ctext x='510' y='115'%3E%E5%9C%96%E6%9B%B8%E9%A4%A8%3C/text%3E%3Ctext x='300' y='250' font-size='17'%3E%E9%81%B8%E6%93%87%E8%A8%AD%E6%96%BD%E6%9F%A5%E7%9C%8B%E8%B3%87%E6%96%99%3C/text%3E%3C/g%3E%3C/svg%3E"
alt="學習中心平面圖，左側是課室，中央是接待處，右側是圖書館"
width="600"
height="300"
usemap="#centre-map"
>
<map name="centre-map">
<area
shape="rect"
coords="40,40,240,180"
href="#classroom"
alt="課室資料"
>
<area
shape="circle"
coords="350,110,60"
href="#reception"
alt="接待處資料"
>
<area
shape="poly"
coords="450,40,570,40,550,180,470,160"
href="#library"
alt="圖書館資料"
>
</map>
</div>
<figcaption>
這是簡化的示意平面圖，
不是實際路線指引或緊急疏散指南。
</figcaption>
</figure>
<nav aria-label="設施資料">
<ul>
<li><a href="#classroom">課室資料</a></li>
<li><a href="#reception">接待處資料</a></li>
<li><a href="#library">圖書館資料</a></li>
</ul>
</nav>
<p class="note">
圖片映射使用固定座標。
你也可以使用上方的文字連結閱讀各項設施資料。
</p>
<section class="facility" aria-labelledby="classroom">
<h2 id="classroom">課室</h2>
<p>
用於 HTML 入門課堂及實習練習的教學空間。
</p>
<p><a href="#page-heading">返回平面圖</a></p>
</section>
<section class="facility" aria-labelledby="reception">
<h2 id="reception">接待處</h2>
<p>
提供課程查詢及一般協助的接待地點。
</p>
<p><a href="#page-heading">返回平面圖</a></p>
</section>
<section class="facility" aria-labelledby="library">
<h2 id="library">圖書館</h2>
<p>
提供參考資料，方便自主學習的安靜空間。
</p>
<p><a href="#page-heading">返回平面圖</a></p>
</section>
</main>
</body>
</html>在這個範例中：
usemap將圖片與具名映射連接起來。- 每個區域都對應插圖中附有標籤的形狀。
- 連結區域具有有意義的替代文字。
- 文字連結涵蓋所有映射目的地。
- 圖片保持 600 × 300 CSS 像素，維持座標對齊。
- 不需要 JavaScript。
固定尺寸、可捲動的映射是這個示範的明確選擇，不代表它適合所有正式網頁。應使用目標瀏覽器及輔助技術測試鍵盤焦點、捲動及連結操作。
16.13 用戶端與伺服器端圖片映射
以上例子是用戶端圖片映射：由瀏覽器判斷訪客選擇了哪個區域。
HTML 也支援使用 ismap 的伺服器端機制：
<a href="/map-handler">
<img
src="images/centre-plan.png"
alt="在學習中心平面圖上選擇位置"
ismap
>
</a>瀏覽器會將選取位置的座標附加至連結 URL，再由伺服器解讀。
這需要伺服器端處理，而且不會像 <area> 一樣提供個別具名連結。
對一般設施或導覽連結，應優先使用具有文字替代的用戶端區域，或更簡單的連結式設計。
16.14 常見錯誤
| 錯誤 | 較好的做法 |
|---|---|
只為 <map> 加入 id | 提供符合 usemap 的 name |
在映射名稱中加入 # | 只在 usemap 中加入 |
| 遺漏連結區域的替代文字 | 描述每個目的地 |
以為 <area> 會繪製可見邊界 | 在圖片中提供邊界及標籤 |
| 使用錯誤數量的座標 | 遵循所選形狀的格式 |
在 coords 加入百分號或單位 | 使用數字座標 |
| 區域意外重疊 | 檢查邊界及文件次序 |
| 將預設區域放在特定連結之前 | 作為備援時，放在特定區域之後 |
| 改變圖片大小卻沒有調整座標 | 保持尺寸或使用響應式替代方案 |
| 只提供視覺映射導覽 | 加入一般文字連結 |
| 使用過小的可點擊區域 | 讓目的地容易選取 |
| 將示意圖用作安全指南 | 使用經適當核實的資訊及設計 |
本章總結： 圖片映射透過 <img>、<map> 和 <area>，將圖片中的不同區域連接至獨立目的地。仔細配對名稱及座標，提供有意義的替代文字和一般文字連結，並考慮鍵盤操作及圖片縮放的影響。
