開始使用 HTML image map 這個技術

HTML 有個功能叫做影像地圖（image map），顧名思義就是把影像增加地圖的效果，例如一張旅遊照片，就可以透過 image map 替造片增加一些超連結，就像是可以自己選擇照片區塊並連結到自己想看的詳細介紹頁面，透過影像地圖的技術就能輕易做到。

為什麼會開始採用 HTML image map 呢？因為公司最近接了一場活動的企劃案，對方有提出要求必須做一個行動 App 開放給他們的客戶下載，現場也要提供觸控螢幕，讓訪客自己挑選要看的樓層或展出區塊，並可以點選出自己要看的樓層或展出區塊的詳細介紹網頁，咱們的美工花了一整個晚上，終於交出精美的展場平面圖，我們這些網頁設計師就必須把 HTML image map 的技術用上去，完成出讓參觀展出人員能自己點選各區塊介紹的功能。

其實 HTML image map 並不是很困難的技術，也不是什麼很新穎的網頁設計技術，甚至可以說是很基礎、很入門的網頁設計技術，掌握幾個大原則，圖片的形狀以及座標，HTML 影像地圖有分方型、圓型以及不規則形，都很實用且都很簡單，網路上的介紹文章也很多，自己花點時間研究研究囉！

• HTML Image Map 影像地圖（Wibibi）
• HTML Image Map 影像地圖設計（WebTech）

有了這樣的技巧，除了這次公司皆得這個案子可以直接上陣，聽說下個 case 的客戶也有類似的需求，主管看了我們這次所實做的效果都很滿意，果然挑對技術對公司是有所幫助的。