有時需在一張圖片上設定多個區域，滑鼠點擊不同區域進入不同頁面，即網頁熱點連結。

基本代碼結構

<img src="test.jpg" usemap="#testmap" alt="test" />
<map name="testmap" id="testmap">
  <area shape="circle" coords="180,139,14" href="test1.html" alt="test1" />
  <area shape="circle" coords="129,161,10" href="test2.html" alt="test2" />
  <area shape="rect" coords="0,0,110,260" href="test3.html" alt="test3" />
</map>

註：<img> 的 usemap 屬性可引用 <map> 的 id 或 name（由瀏覽器決定），故需同時給 <map> 添加 id 和 name 兩個屬性。

如何獲取座標值？

方法一：HTML 原生 ismap 屬性

新建 HTML 頁面，在 body 插入：

<a href="#"><img src="test.jpg" ismap="ismap"></a>

關鍵在 ismap="ismap"。開啟頁面，滑鼠移至圖片任意位置，瀏覽器左下角狀態欄即顯示當前座標值。

方法二：Dreamweaver 視覺化工具

1. 開啟 Dreamweaver，新建頁面，插入圖片

2. 點選「矩形」或其他熱點工具，在圖片上拖動選區

3. 切換到代碼視圖，完整代碼已自動生成

兩種方法各有優勢：原生法無需軟體、即時獲取；DW 法視覺化直觀、代碼自動生成。根據習慣選擇即可。