Html 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);" alt=""/> -->6         <area shape="circle" coords="633,276,28" target="_blank" href ="javascript:alert(&#39;汽车图标&#39;);" 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(&#39;汽车图标&#39;);" 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(&#39;第二张图的汽车图标&#39;);" alt=""/>10     </map>11 </div>

 

三、樣式表：

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

四、JS設定圖片的比例：（記得引用jquery: ）##

 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，赋值给原有coords19         $(mapD[i]).attr('coords',_arrS); 
20     }21 }22 set_map();

#五、總結：

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

以上是Html map使用實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！