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

tags: HTML

上一篇

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

Common 目標

1. 如上圖，左側是手機畫面，右側是電腦畫面
2. 可以發現，不管是哪種版本，版型皆未跑掉
3. 為了使 map 不因 img 的解析度改變，而使 area 的座標跑掉
4. 此種方法不是 RWD

Tutorial 步驟教學

1. 於不想隨螢幕尺寸改變的區域，設定 width，將寬度寫死，例如：width: 1518px;，故不隨螢幕尺寸改變
   • 為了使 map 不因 img 的解析度改變，而使 area 的座標跑掉

<div id="main" style="width: 1518px; margin: auto;">
    <!-- Logo -->
    <div id="logo"></div>
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light"></nav>
    <!-- text -->
    <div class="row"></div>
    <!-- 美食地圖-->
    <img src="example.png" usemap="#map_1">
    <map name="map_1">            
        <area href="example" alt="戽斗米糕" title="Hu-Dou Savory Rice Cake" shape="rect" coords="286,480,346,493" />
    </map>
    <!-- shadow -->
    <div class="row"></div>
</div>

2. 但螢幕尺寸大於你設定的寬度後，會出現其他多餘的空間，如下圖
   

3. 因為這些多餘的空間的關係，建議加入margin: auto;，讓不想隨螢幕尺寸改變的區域置中

Example 範例網站

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

重點提示

1. 不管是手機、電腦，版型皆一致
2. 只有當螢幕尺寸大於 1000px 時，兩側才會開始有多餘空間
3. 此種寫法，可以使 map 不因 img 的解析度改變，而使 area 的座標跑掉

範例網站怎麼寫的呢?

1. 可以看到一樣有寫死的 width，width: 1000px;
2. 但這個尺寸應該是先為了手機版型而設定
3. 一樣有margin: auto;，讓該區域在螢幕尺寸大於1000px後置中
4. 目的相同：為了使 map 不因 img 的解析度改變，而使 area 的座標跑掉

Reference 參考資料

1. MAP - 表町商店街：http://omotecho.or.jp/?page_id=221
2. Tainan Gourmet Plaza - Map：https://spicyboyd.github.io/TainanGourmetPlaza/map.html