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 name="TestMap">
<area shape="rect" coords=" x1 , y1 , x2 , y2" href="連結網址">
</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 等軟體查詢圖型的每個座標，製作起來也許會比較容易。
推薦給您的相關主題