本篇文章小編要介紹如何使用 HTML Image Map在一張圖片上建立多個超連結 ，舉個例子來說如果一張世界地圖可以將它劃分成多個區域分別建立超連結，當網友點擊某個國家後，就可以將其導向那個國家的介紹文章，這種網頁技巧在製作網頁時常會被使用到，目前大多數人使用的瀏覽器Chrome、Firefox、safari…等也皆可以使用此功能，已經算是一種技術相當成熟的功能了，以下小編將針對Image Map的各種用法分別介紹給各位。
HTML Image Map在一張圖片上建立多個超連結教學
影像地圖語法規則主要分為兩部份：
1.圖片的設定：
<img src="圖片網址" width="圖片的寬度" height="圖片的高度" usemap="#影像地圖名稱">2.圖片區域以及超連結設定：
<map name="影像地圖名稱">
<area shape="超連結區域的形狀" coords="圖形座標" href="超連結">
</map>完整程式碼請參考：
<img src="圖片網址" width="圖片的寬度" height="圖片的高度" usemap="#影像地圖名稱">
<map name="影像地圖名稱">
<area shape="超連結區域的形狀" coords="圖形座標" href="超連結">
</map>
影像地圖區域形狀設定：
1.方型
方型則是使用如下圖將(X1,Y1)與(X2,Y2)座標所連接而成的方型範圍即是超連結的範圍。
<area shape="rect" coords="X1,Y1,X2,Y2" href="超連結">
2.圓形
圓形則是使用圓心座標與半徑所畫出的圓即為超連結的範圍。
<area shape="circle" coords="圓心X,圓心Y,半徑" href="超連結">
3.不規則形狀
不規則形狀可設定多個點位，但需填寫X1與Y1坐標，再填寫X2，Y2坐標…依序填寫下去，各個點位所連結而成的範圍即為超連結的範圍。
<area shape="polygon" coords="座標X1,座標Y1,座標X2,座標Y2..." href="超連結">
延伸閱讀：