自動目錄

• 參考資料

影像地圖就是在圖片上設定一塊區域，然後讓訪客可以直接點擊圖片上的區塊進到設定好的連結，這個區域可以是長方形、圖形或多邊形。如果不用這個功能，你可能得在圖片上放一些看不見的浮動區塊或多個圖片組合達到這個效果，會麻煩很多。

1 先設定一張圖片

<img src="your_img.jpg" usemap="#my_map1"> 

這張圖最好設定原比例，不要縮放，因為圖片縮放座標並不會跟著縮放，會造成移位。

2 設定影像地圖的區塊，例如

  長方形  rect 就兩個座標 x1,y1,x2,y2

  圓形 circle 為一個圓心和半徑 x1,x2,r

  多邊形 polygon 為多個座標組成，最少3個點，少於3個點沒有作用 x1,y1,x2,y2,x3,y3,x4,y4,...

<map name="my_map1">
 <area shape="rect" coords="396,72,524,268" href="link.php" />
 <area shape="circle" coords="100,390,40" href="link2.php">
 <area shape="polygon" coords="0,284,393,385,299,0" href="link3.php">
</map>

注意

• usemap的屬性中要多加一個"#"，指定的是 map標籤中的 name而不是id，可以說這是早期HTML標準中的活化石。
• 如果圖片有指定寬高時，area上的 coords不會受到影響，所以會跑位
• 超出圖片大小外的部分沒有作用
• 座標不完整該座標失效，例如少一個y座標
• 多邊形若有對折或交叉，以有包圍到的為準，所以也可以用這個方法設定蝴蝶結形。

參考資料

[1] http://www.study-area.org/coobila/tutorial_289.html

原文編修 2009-01-25 00:18:41