【Web】如何利用 HTML ＜map＞ Tag 來完成影像地圖設計 (上)

tags: HTML

Common 簡介

• An image-map is an image with clickable areas. 具有可點擊區域的一張圖片

• 讓 img 圖片能夠規劃出不同區塊，且使每個區塊成為 Link 超連結

• 例如：提供旅遊地圖讓網友選擇每個景點的介紹，這時候若地圖上的各區塊能夠做成超連結，當網友選擇某區塊，就帶網友前往專門介紹該景點的內容網頁。

• MAP - 表町商店街：http://omotecho.or.jp/?page_id=221

  

Tutorial 步驟教學

1. 設置一張 img 圖片

• 於 img 的參數中加入 usemap：即 ＜map＞ tag 的名稱
• 注意：於 ＜map＞ tag 的名稱前方必須加 #

<img src="example.png" usemap="#food_map">

2. 撰寫 map 名稱

• 與步驟1. 的 usemap 對應

<map name="food_map"></map>

3. 設定 area，使特定區塊成為 Link

• 必填參數
  • href：連結的網址
  • title：當滑鼠游標 hover 時，要顯示的文字
    
    
  • shape：設定 area 的形狀
    • rect：矩形、方形
    • circ：圓形
    • poly：不規則
  • coords：座標值，根據不同的 shape，有不同的寫法
    • rect：x1,y1,x2,y2，也就是方形邊界上下左右的座標值
      
      
    • circ：x,y,radius，先定義圓形的中心，再給予圓形半徑大小
      
      
    • poly：x1,y1,x2,y2,…,xn,yn，設定所有多邊形的點的座標值
      
      
• 非必填參數
  • target：設定超連結開啟的方式
    • _self：預設，直接在原本的頁面開啟連結
    • _blank：開啟新分頁，並於新分頁開啟連結
  • alt：此區域替代文字，(通常用不到)

<map name="food_map">
    <area href="https://www.google.com.tw" title="Example" shape="rect" coords="286,480,346,493">
</map>

Example 程式碼範例

<!-- 美食地圖-->
<img src="https://i.imgur.com/MyY3RRs.png" usemap="#map_1">
<map name="map_1">
    <!-- coords=X1,Y1,X2,Y2(左上右下座標) -->
    <!-- Appetizer -->
    <area href="appetizer.html#Hu-Dou Savory Rice Cake" alt="戽斗米糕" title="Hu-Dou Savory Rice Cake" shape="rect" coords="286,480,346,493" />
    <area href="appetizer.html#Lu Ji Bao" alt="祿記包子" title="Lu Ji Bao" shape="rect" coords="1126,742,1184,754" />
    <area href="appetizer.html#Shuixian Temple leaf Savory Rice Cake" alt="水仙宮粽葉米糕" title="Shuixian Temple leaf Savory Rice Cake" shape="rect" coords="545,462,558,573" />
    <area href="appetizer.html#Ji-Pin Wheel Pie" alt="吉品紅豆餅" title="Ji-Pin Wheel Pie" shape="rect" coords="722,709,794,721" />
    <area href="appetizer.html#Kintoku Spreing Rolls" alt="金得春捲" title="Kintoku Spreing Rolls" shape="rect" coords="576,391,637,404" />
    <!-- 以下省略 -->
</map>

Result 成果

• Link 連結：https://spicyboyd.github.io/TainanGourmetPlaza/map.html

Reference 參考資料

1. MAP - 表町商店街：http://omotecho.or.jp/?page_id=221
2. HTML Image Map 影像地圖設計：
   http://www.webtech.tw/info.php?tid=HTML_Image_Map_影像地圖設計
3. HTML ＜map＞ Tag：https://www.w3schools.com/tags/tag_map.asp
4. HTML ＜area＞ Tag：https://www.w3schools.com/tags/tag_area.asp

下一篇

【Web】如何利用 HTML ＜map＞ Tag 來完成影像地圖設計 (下)
https://spicyboyd.blogspot.com/2018/07/web-html-map-tag.html