Html map使用实例教程

零下一度 原创: 2017-07-17 16:53:13 1752浏览

我就不介绍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="//m.sbmmt.com/m/faq/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('汽车图标');" 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="//m.sbmmt.com/m/faq/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="//m.sbmmt.com/m/faq/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，赋值给原有coords19         $(mapD[i]).attr('coords',_arrS); 
20     }21 }22 set_map();

五、总结：

细心的童鞋就会发现，为什么别人给图片都是加ID而我却加class，原因是为了方便多张缩放过的图片使用map定位。额...... 多读几遍就懂！

以上就是Html map使用实例教程的详细内容，更多请关注php中文网其它相关文章！

Html 问题遇到 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：一款好用的前端编辑器--Sublime Text 下一条：css中定位position的详细介绍