HTML 影像對映
使用 HTML 影像對映，您可以在影像上建立可點選的區域。
影像對映
HTML <map> 標籤定義一個影像對映。影像對映是一個帶有可點選區域的影像。區域使用一個或多個 <area> 標籤定義。
請嘗試點選下方圖片中的電腦、電話或咖啡杯
示例
這是上方影像對映的 HTML 原始碼
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
自己動手試一試 »
它是如何工作的？
影像對映的理念是，您可以根據在影像的哪個位置點選來執行不同的操作。
要建立影像對映，您需要一張影像，以及一些描述可點選區域的 HTML 程式碼。
影像
影像使用 <img> 標籤插入。與其他影像的唯一區別是，您必須新增一個 usemap 屬性
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
usemap 值以井號 # 開頭，後跟影像對映的名稱，用於在影像和影像對映之間建立關聯。
提示： 您可以使用任何影像作為影像對映！
建立影像對映
然後，新增一個 <map> 元素。
<map> 元素用於建立影像對映，並透過使用必需的 name 屬性與影像關聯
<map name="workmap">
name 屬性的值必須與 <img> 的 usemap 屬性值相同。
區域
然後，新增可點選的區域。
可點選區域使用 <area> 元素定義。
形狀
您必須定義可點選區域的形狀，可以選擇以下值之一
rect- 定義一個矩形區域circle- 定義一個圓形區域poly- 定義一個多邊形區域default- 定義整個區域
您還必須定義一些座標才能將可點選區域放置在影像上。
Shape="rect"
shape="rect" 的座標成對出現，一對用於 x 軸，一對用於 y 軸。
所以，座標 34,44 位於距離左邊距 34 畫素和距離頂部 44 畫素的位置
座標 270,350 位於距離左邊距 270 畫素和距離頂部 350 畫素的位置
現在我們有足夠的資料來建立一個可點選的矩形區域
這是變得可點選並將使用者傳送到頁面 "computer.htm" 的區域
Shape="circle"
要新增圓形區域，請先找到圓心的座標
337,300
然後指定圓的半徑
44 畫素
現在您有足夠的資料來建立一個可點選的圓形區域
這是變得可點選並將使用者傳送到頁面 "coffee.htm" 的區域
Shape="poly"
shape="poly" 包含多個座標點，這些點構成由直線（多邊形）形成的形狀。
這可以用來建立任何形狀。
比如一個可頌形狀！
我們如何讓下圖的可頌餅成為可點選的連結？
我們必須找到可頌餅所有邊緣的 x 和 y 座標
座標成對出現，一對用於 x 軸，一對用於 y 軸
示例
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
自己動手試一試 »
這是變得可點選並將使用者傳送到頁面 "croissant.htm" 的區域
影像對映和 JavaScript
可點選區域也可以觸發 JavaScript 函式。
在 <area> 元素中新增 click 事件來執行 JavaScript 函式
示例
在這裡，我們使用 onclick 屬性在區域被點選時執行 JavaScript 函式
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("您點選了咖啡杯！");
}
</script>
自己動手試一試 »
Chapter Summary
- 使用 HTML
<map>元素定義影像對映 - 使用 HTML
<area>元素定義影像對映中的可點選區域 - 使用
<img>元素的 HTMLusemap屬性指向一個影像對映
HTML 影像標籤
| 標籤 | 描述 |
|---|---|
| <img> | 定義一個影像 |
| <map> | 定義影像對映 |
| <area> | 在影像對映中定義可點選區域 |
| <picture> | 定義多個影像資源的容器 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
