HTML Image Map 影像地圖設計 - 網頁設計教學站

HTML Image Map 影像地圖是一種讓網頁圖片（img）能夠規劃出不同區塊，每個區塊成為超連結效果的網頁設計技巧，舉個例子來說，有些網站提供旅遊地圖讓網友選擇每個景點的介紹，這時候若地圖上的各區塊能夠做成超連結，當網友選擇某區塊，就帶網友前往專門介紹該景點的內容網頁，這種在網頁地圖上提供各個景點區塊超連結的技巧，就可以用 HTML Image Map 影像地圖來做。影像地圖一般來說是用在網頁的圖片上居多，算是相當傳統的 HTML 網頁設計技巧，獲得大多數主流的瀏覽器支援。

HTML Image Map 影像地圖語法規則

HTML Image Map 影像地圖的設計概念共分為兩個主要部分，第一個部份是圖片，第二個部份是影像地圖的範圍與超連結，以上方這個影像地圖的語法規則第一行，就是背景圖片的設定，換句話說，要先準備一張圖片，並且在圖片標籤內使用 usemap 的屬性，這個屬性的用意是告訴瀏覽器，將指定的影像地圖套用到圖片上，接著第二行至第四行的 <map> 標籤區塊內，就是用來設定影像地圖的地方，<area> 標籤用來控制影像地圖的 shape（形狀）、coords（範圍）以及 href（超連結）這三個重要項目，其中形狀與範圍分別使用不同的屬性值，這點非常重要，因為寫錯的話，Image Map 就會失效，有以下三種設定方式可以選則。

方形影像地圖的 <area> 設定範例：<area shape="rect" coords="X1,Y1,X2,Y2" href="超連結">
圓形影像地圖的 <area> 設定範例：<area shape="circle" coords="圓心 X,圓心 Y, 半徑" href="超連結">
不規則影像地圖 <area> 設定範例：<area shape="polygon" coords="點座標 1,點座標 2, ..." href="超連結">

有了這幾種不同的影像地圖設定方式，我們就把它們套用到範例中給各位看看。

HTML Image Map 影像地圖範例一、方形影像地圖

範例效果

範例一設計的是方形的 HTML Image Map 影像地圖，<area> 設定 shape="rect"，並分別將左上角與右下角的 X 座標, Y 座標依序寫入 coords 中，瀏覽器就知道在這個框框範圍內的區塊要成為影像地圖，小括號內的數字左邊是 X 軸座標，右邊是 Y 軸座標。

舉例來說 (50,50) = (X1,Y1)，(150,150) = (X2,Y2)

HTML Image Map 影像地圖範例二、圓形影像地圖

範例效果

範例二做的是圓形的影像地圖，與範例一差不多，不過 <area> 的 shape 參數值設定為 circle 表示為圓形，所以範圍 coords 就要填入圓心的 X,Y 座標以及圓形的半徑，如範例中「coords="100,100,50"」代表圓心 (X,Y) 座標為 (100,100)，半徑則為 50。

HTML Image Map 影像地圖範例三、不規則區塊影像地圖

範例效果

不規則形狀的 Image Map 設計時需要花比較多心思，以範例三來說，為一個不規則的四邊形，所以我們必須先將形狀設為不規則，也就是 <area> 標籤內的 shape 要設為 polygon，接著必須分別將四個角的座標位置設定在 coords 內，這個部份其實也蠻簡單的，依序將第一個點的 X,Y 座標寫入，再寫第二個點的 X,Y 座標，以此類推，把四個點的座標都寫進去即可完成。

以上三種就是常見的 HTML Image Map 影像地圖設計方式，儘管影像地圖是相當傳統的網頁設計技巧，不過由於它的變化很大，可以設計出相當多實用的功能，所以還蠻值得一學，現在還是有許多網頁應用這樣的技巧在設計呢！

更多圖片處理語法