HTML Image Map 影像地圖

HTML Image Map 影像地圖用來在圖檔上劃分出區塊當成超連結使用,可以只劃分出一個單一區塊,也可以劃分出多個不同的區塊,使用的技巧是圖片的位置做標,應用也相當的廣泛,某些網頁編輯軟體也包含了 Image Map 影像地圖的功能,像是 Dreamweaver。

HTML Image Map 影像地圖範例

假設我們有一個圖片如下,左上角座標為 x1,y1,右下角做標為 x2,y2,這時候我們想要為此圖片中藍色框線的圖形,加上 Image Map 影像地圖,就會需要用到這兩個角的座標,請看下方的語法範例。



程式碼的寫法如下
<img src="圖片網址" width="300" height="200" usemap="#TestMap">
<map name="TestMap">
 <area shape="rect" coords=" x1 , y1 , x2 , y2" href="連結網址">
</map>
先稍微解說一下此段語法,首先第一行 <img src="圖片網址" width="300" height="200" usemap="#TestMap"> 是呼叫出我們的圖片,並設定寬度為 300,高度為 200,usemap 的意思是我們要使用下方 TestMap 的 Image Map 影像地圖參數。

接著往下看,<map></map> 標籤所包含的內容則為我們所設定的 Image Map 影像地圖參數,<area> 指的是地圖區域,shape 是設定圖型的樣式,在此範例中我們設定的是 shape="rect",代表方型,你也可以設定為別的形狀,例如圓型是 shape="circle",不規則形的寫法則為 shape="polygon"。coords 的地方就請填入四個角的座標位置,分別填入 x1,y1,x2,y2,順序請勿弄錯,最後的 href 是要連結的網址。

光是方型還不夠用嗎?當然不夠啦!如果今天要做的是圓型的按鈕,或者是更強大的台灣地圖各地旅遊資訊,就有可能還會用到圓型或不規則形,所以再提供各位圓型與不規則形狀的 Image Map 影像地圖語法。

圓型 Image Map 影像地圖語法

<area shape="circle" coords="圓心 x 座標 , 圓心 y 座標 , 半徑" href="連結網址">


不規則形狀(或者說是多邊形)的 Image Map 影像地圖作法

<area shape="polygon" coords="第一點的座標 , 第二點的座標 , .... , 第 N 點的座標" href="連結網址">


雖然圓型與多邊型的寫法有些許不同,但觀念其實都是一樣的,掌握好各種圖形的座標或圓心,就可以很容易的製做出精準的 Image Map 影像地圖,如果透過類似 Dreamweaver 或 FrontPage 等軟體查詢圖型的每個座標,製作起來也許會比較容易。

推薦給您的相關主題
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C