HTML - Image Map：新手友善指南

你好，有抱負的網頁開發者！今天，我們將要進入HTML Image Maps的精彩世界。別擔心你是新來的；我會帶領你一步步學習，就像我在課堂上多年的耐心教學一樣。讓我們一起踏上這個旅程吧！

HTML - Image Map

為什麼要使用Image Map？

想像一下，你的網站上有一張美麗的世界地圖，你希望訪客點擊不同的國家來了解更多的資訊。這就是Image Maps派上用場的地方！它們讓你能在單一張圖片上創建可點擊的區域，將其轉變為互動元素。

HTML `<map>` 標籤

<map> 標籤就像是我們互動區域的容器。我們在這裡定義地圖的名稱，稍後我們將用它來連接圖片。

這是它的樣子：

<map name="worldmap">
<!-- 我們將在這裡添加我們的可點擊區域 -->
</map>

在這個例子中，我們將地圖命名為 "worldmap"。把它當成給你的地圖一個獨特的ID，我們稍後會用到。

HTML `<area>` 標籤

現在，讓我們來討論 <area> 標籤。這裡就是魔術發生的地方！每個 <area> 標籤定義了我們圖像地圖中的一個可點擊區域。

這是一個基本結構：

<area shape="shape_type" coords="coordinates" href="link_url" alt="description">

讓我們來分解這個：

shape：定義可點擊區域的形狀（rect、circle 或 poly）
coords：指定區域的坐標
href：當區域被點擊時要前往的URL
alt：區域的文字描述（對於無障礙使用非常重要）

HTML Image Map 實戰

現在，讓我們把所有東西放在一起，用一個真實的例子。想像我們有一張比薩的圖片，我們希望每個切片都是可點擊的。

<img src="pizza.jpg" alt="美味的比薩" usemap="#pizzamap">

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="起司片">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="辣腸片">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="蘑菇片">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="蔬菜片">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="總匯片">
</map>

讓我們來分解這個：

我們有一個 <img> 標籤來顯示我們的比薩圖片。
<img> 標籤中的 usemap 屬性將其連接到我們名為 "pizzamap" 的地圖。
我們定義了我們的 <map>，名為 "pizzamap"。
每個 <area> 代表比薩的一個切片：

我們使用 shape="poly" 為多邊形（三角形的切片）。
coords 定義每個三角形的點。
每個切片鏈接到關於該類型比薩的不同頁面。

形狀類型和它們的坐標

讓我們看看你可以在圖像地圖中使用哪些不同的形狀：

形狀	坐標	示例
rect	左, 上, 右, 下	`<area shape="rect" coords="0,0,82,126" href="square.html" alt="方形">`
circle	中心-x, 中心-y, 半徑	`<area shape="circle" coords="90,58,3" href="circle.html" alt="圓形">`
poly	x1,y1,x2,y2,...,xn,yn	`<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="多邊形">`