前言：百度了一下html map，嗯嗯，介紹的挺詳細的，如果是初學者，直接看他們的教程，挺好的，就不用我再多說了。

不過我發現一個問題，就是都是介紹map有什麽屬性怎麽用的，這明顯就是照搬文檔自己再改一下嘛，難道你們在使用中沒遇到什麽特別的需求或者什麽問題？怎麽不寫出來？

所以我就不介紹map了，直接說遇到的問題。

問題一：如果圖片原始尺寸是900px，但是你展示的尺寸是450px,那map就定位不準了，怎麽破？

問題二：如果一個頁面有多張圖片需要map，怎麽做？

一、素材圖片：

1、這是一張900px的素材圖片，我們要讓右下角4個小圓圖標可以點擊。

二、HTML結構：

1、coords的對應坐標不用變，只需在JS裏面改變其比例就OK！

1 <div class="map_img">
2     <img class="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
3     <map name="mapName">
4         <!-- 方形區域寫法 -->
5         <!-- <area shape="rect" coords="605,250,660,305" target="_blank" href ="javascript:alert(1);" /> 
 
-->
6         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(‘汽車圖標‘);" alt=""/>
7     </map>
8 </div>

2、如果有多張圖片，一張圖片對應一個map，class不用變，改變map的name值和對應的usemap值就好。name=usemap他們倆是一對CP哦，不要分開它們，給他們一樣的值。

 1 <div class="map_img">
 2     <img class
 
="mapImg" usemap="mapName" src="isphoto/abc.png" alt="" style="width: 450px">
 3     <map name="mapName">
 4         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(‘汽車圖標‘);" alt=""/>
 5     </map>
 6     <!-- 一張圖片對應一個name和usemap -->
 7     <img class="mapImg" usemap="mapName2" src="isphoto/abc.png" alt="" style="width: 450px">
 8     <map name="mapName2">
 9         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(‘第二張圖的汽車圖標‘);" alt=""/>
10     </map>
11 </div>

三、樣式表：

　　！@#￥%……&*？（404）

四、JS設置圖片的比例：（ 記得引用jquery: <script src=‘http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js‘></script> ）

 1 // 設置 圖片熱點區域
 2 function set_map() {
 3     var mapD = $(‘area‘); //獲取頁面所有的熱點區域
 4     var imgW = $(‘.mapImg‘)[0].naturalWidth || 900; //圖片原始尺寸
 5     var imgW01 = $(‘.mapImg‘)[0].innerWidth || 450; //圖片現在尺寸
 6     var Multiple = imgW01 / imgW; //對應比例
 7     var _arrS = ‘‘; //存放coords的值
 8     var _arr = []; //存放coords對應的值
 9     for (var i = 0; i < mapD.length; i++) { //熱點區域的個數
10         _arr = [];
11         _arrS = $(mapD[i]).attr(‘coords‘);
12         _arr = _arrS.split(‘,‘);
13         //coords值的個數，圓形為3個，方形為4個
14         for (var j = 0; j < _arr.length; j++) { 
15             _arr[j] = _arr[j] * Multiple;
16         }
17         _arrS = _arr.join(‘,‘);
18         // 把縮放比例後對應的coords，賦值給原有coords
19         $(mapD[i]).attr(‘coords‘,_arrS); 
20     }
21 }
22 set_map();

五、總結：

細心的童鞋就會發現，為什麽別人給圖片都是加ID而我卻加class，原因是為了方便多張縮放過的圖片使用map定位。額...... 多讀幾遍就懂！

六、課後作業：

把剩余的三個小圓圖標的坐標標出來，並測試沒問題？（提示：用PS的 矩形選框工具+信息 可以很容易就找到對應的坐標）

Html map 實際使用中遇到的問題及解決方案