本篇分享 image map 影像地圖的基本介紹、如何用工具快速建立 image map，以及動態改變 image map area coordinates。
目錄
什麼是 Image Map？該如何使用？
Image Map 是一個可以讓單張圖片切割成不同點擊區域，每個區域導向不同連結的切版方法。
矩形範圍
首先介紹矩形點擊範圍，拿最近熱門的駭客任務角色圖片來示範：
如果想要讓使用者點擊每個角色的圖片可以導向演員的 wiki 頁面，可以在 html 中這麼做：
Step 1：在 img 中給定參數 width = 1280，height = 720，並預先給定 usemap = “#map-1″，連接等等要建立的 image map
<img class="block" width="1280" height="720" usemap="#map-1" src="./matrix.jpg">Step 2：找出每個角色的「左上角」和「右下角」的 x, y 座標值 ，從左到右依序是
role 1: (1, 0), (319, 720)
role 2: (320, 0), (639, 720)
role 3: (639, 0), (962, 720)
role 4: (962, 0), (1280, 720)Step 3：緊接著在 img 下面建立 map，map 裡面
- 建立一個 area
- shape 填入 rect ，設定為矩形
- 依序填入 role 1 左上角和右下角的座標到 area 的 coords，彼此用逗號分格
- href 填入點擊後要跳轉的頁面 url
<map name="map-1">
<area coords="1,0,319,720" shape="rect" href="https://zh.wikipedia.org/wiki/%E5%9F%BA%E5%8A%AA%C2%B7%E9%87%8C%E7%BB%B4%E6%96%AF">
</map>這樣就能建立一個覆蓋 role 1 的矩形點擊範圍，如下面半透明紅色
Step 4：其他區塊依樣畫葫蘆，最終如下
<img class="block" width="1280" height="720" usemap="#map-1" src="./matrix.jpg">
<map name="map-1">
<area coords="1,0,319,720" shape="rect" href="https://zh.wikipedia.org/wiki/%E5%9F%BA%E5%8A%AA%C2%B7%E9%87%8C%E7%BB%B4%E6%96%AF">
<area coords="320,0,639,720" shape="rect" href="https://zh.wikipedia.org/wiki/%E5%87%B1%E8%8E%89-%E5%AE%89%C2%B7%E6%91%A9%E7%B5%B2">
<area coords="639,0,962,720" shape="rect" href="https://zh.wikipedia.org/wiki/%E8%91%89%E6%B5%B7%E4%BA%9E%C2%B7%E9%98%BF%E5%B7%B4%E6%9D%9C-%E9%A6%AC%E6%B1%80%E4%BA%8C%E4%B8%96">
<area coords="962,0,1280,720" shape="rect" href="https://zh.wikipedia.org/wiki/%E5%96%AC%E7%B4%8D%E6%A3%AE%C2%B7%E6%A0%BC%E7%BE%85%E5%A4%AB">
</map>用瀏覽器跑起來看看，確認點擊角色區塊都能跳到對應演員的 wiki 頁面
統整起來，Image Map 的基本結構如下
<img src="圖片網址" width="圖片寬度" height="圖片高度" usemap="#影像地圖名稱">
<map name="影像地圖名稱">
<area shape="點擊範圍形狀" coords="範圍座標" href="連結">
</map>rect 座標語法如下
<area shape="rect" coords="左上 x, 左上 y, 右下 x, 右下 y" href="超連結">除了上面介紹的 rect 矩形範圍之外，還有另外兩種形狀可以選擇
圓形範圍
語法如下
<area shape="circle" coords="圓心 x, 圓心 y, 半徑 r" href="超連結">用圓形範圍覆蓋角色的頭部，讓他可以點擊跳到對應頁面
<map name="map-2">
<area coords="127,136,128" shape="circle" href="https://zh.wikipedia.org/wiki/%E5%9F%BA%E5%8A%AA%C2%B7%E9%87%8C%E7%BB%B4%E6%96%AF">
<area coords="426,126,99" shape="circle" href="https://zh.wikipedia.org/wiki/%E5%87%B1%E8%8E%89-%E5%AE%89%C2%B7%E6%91%A9%E7%B5%B2">
<area coords="906,216,71" shape="circle" href="https://zh.wikipedia.org/wiki/%E8%91%89%E6%B5%B7%E4%BA%9E%C2%B7%E9%98%BF%E5%B7%B4%E6%9D%9C-%E9%A6%AC%E6%B1%80%E4%BA%8C%E4%B8%96">
<area coords="1081,101,87" shape="circle" href="https://zh.wikipedia.org/wiki/%E5%96%AC%E7%B4%8D%E6%A3%AE%C2%B7%E6%A0%BC%E7%BE%85%E5%A4%AB" >
</map>點擊範圍如圖
任意多邊形範圍
語法如下
<area shape="poly" coords="x1, y1, x2, y2, x3, y3..." href="超連結">在角色頭部設定任意多邊形點擊範圍
<map name="map-3">
<area coords="128,17,223,189,33,182,59,79" shape="poly" href="https://zh.wikipedia.org/wiki/%E5%9F%BA%E5%8A%AA%C2%B7%E9%87%8C%E7%BB%B4%E6%96%AF">
<area coords="468,40,511,163,375,192,375,99" shape="poly" href="https://zh.wikipedia.org/wiki/%E5%87%B1%E8%8E%89-%E5%AE%89%C2%B7%E6%91%A9%E7%B5%B2">
<area coords="943,176,943,252,841,235,864,139" shape="poly" href="https://zh.wikipedia.org/wiki/%E8%91%89%E6%B5%B7%E4%BA%9E%C2%B7%E9%98%BF%E5%B7%B4%E6%9D%9C-%E9%A6%AC%E6%B1%80%E4%BA%8C%E4%B8%96">
<area coords="1124,27,1158,157,1017,165,1021,64" shape="poly" href="https://zh.wikipedia.org/wiki/%E5%96%AC%E7%B4%8D%E6%A3%AE%C2%B7%E6%A0%BC%E7%BE%85%E5%A4%AB">
</map>點擊範圍如圖
如何使用工具快速建立 Image Map？
分享一個免費的線上工具，讀入圖片後，點擊畫出想要的 area 範圍，就能輕鬆匯出 html code 哦！
進入頁面後，點擊「Select Image from My PC」讀入需要建立 Image Map 的圖片
頁面中間會出現選擇的圖片，下方有輸入匡，切換 Shape 到想要的形狀，再去圖片區點擊即可建立！亦可點擊「Add New Area」增加範圍。其中 Link 等輸入匡可選填，若有填入，最後生成 code 會自動帶入 href 等欄位。
建立完畢，點選「Show Me The Code」就能輕鬆得到 html code 囉！
如何透過 js 讓 Image Map 可以 RWD 動態調整 area coordinates？
Image Map 在建立時，需要在 Img 上寫死 width 和 height，如此兩者才能準確對應。但是在 RWD 設計下，圖片寬高會依照頁面寬度動態改變，要如何讓 image map 裡面寫死的範圍也一同改變呢？
此時需要 jQuery RWD Image Maps 這個 lib 幫忙！使用方法非常簡單，只需要在頁面 initialize 後跑一行
$(() => {
$('image[usemap]').rwdImageMaps();
});當頁面寬度改變時，lib 會動態去調整 area 的 coords，如此即可做到 RWD 囉！
如果覺得我文章內容對你有幫助的話，請在文章後面幫我按 5 個讚！讓我知道大家都喜歡什麼內容哦！
範例原始碼在此下載：github
延伸閱讀：如何把 MutationObserver RxJS 化？
