個人先做而一個例子
<body> <img src="圖像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg" width="800px" height="600px" usemap="#m" alt="圖片加載有誤"/> <map name="m"> <area shape="rect" coords="10,10,100,100" href="http://wwww.baidu.com" target="_blank" alt="圖片加載有誤"/> <area shape="rect" coords="300,250,400,470" href="圖像映射/b.jpg" target="_blank"/> <area shape="circle" coords="200,200,90" href="圖像映射/b.jpg" target="_blank"/> <area shape="poly" coords="0,500,0,600,100,550" href="圖像映射/a.jpg" target="_blank"/> </map> </body> </html>
運行結果
分析：
格式：
<map name="xyz">
<area shape="" coords="" href="" target="" />
</map>
<img src="" usemap="#xyz" />
圖像映射可以理解為圖片加載圖片，通過<img/>后添加<map>和<area>設置。
圖像映射分為：
(1)服務器端圖像映射：將點擊的坐標發送給服務器，由服務器的腳本來決定。（例如：href="http://www.baidu.com"）
(2)客戶端圖像映射：根據點擊位置不同確定鏈接目的。（例如：href="圖像映射/a.jpg"）
知識點：
通過<img/>后添加<map>和<area>設置。
<map>元素表明映射的開始
<area>元素表明每個區域，如果要把一個圖片分4個區域，則用4個area。
<map>元素只有一個name屬性.
下面介紹area元素的屬性：
(1)shape：必須的屬性，用於描述區域的形狀，rect\poly\circle\default 可選, 矩形\多邊形\圓形，default指的是還沒有被定義的區域。
(2)coords：
<!--"rect"表示該區域是矩形，"0,0,100,100"表示左上角的坐標和右下角的坐標，左上角“0,0”-->
<!--"circle"表示該區域為圓形，"10,10,5"表示圓心坐標和半徑-->
<!--"poly"表示多邊形，"0,0,100,100,234,234,123,123,245,245"表示所有頂點的坐標-->
(3)href和nohref：
href：href="http://www.baidu.com"，連接網頁；
href="圖像映射/a.jpg" 連接大圖片，（圖片必須存在www目錄下，否則找不到）
nohref：如果不指定href屬性，則需要指定nohref，nohref="nohref"
(4)target：和<a>一樣。
(5)alt：圖片不顯示的一種提示。
注意：
(1)在<img>中設置usemap屬性。
(2)在<map>中設置name屬性。
參考網頁來源（感謝兩位前輩）：
http://www.cnblogs.com/KeenLeung/archive/2012/11/04/2754142.html
http://blog.csdn.net/xiazdong/article/details/6805386