关键词：
前言：百度了一下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);" 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="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的 矩形选框工具+信息 可以很容易就找到对应的坐标）
使用speex动态链接库过程中遇到问题及解决方法
本以为speex的应用程序很容易就能跑起来，可是，实际操作中才发现，这里面暴露的问题还真不少。看来以后不能眼高手低了，知行合一，这个一定要牢记在心中。 speex安装成功后，可以一直无法调用动态链接库，网上... 查看详情
几个开发中遇到的问题及解决办法
...ase:‘NotFound‘,Version:1.1解决办法：将请求中的localhost改为实际的IP2HttpClient无法调用PostAsJsonAsync()方法解决办法：添加System.Net.Http.Formatting的依赖引用3:ASP.NETCOREwebapi客户端访问Controller时找不到对象的方法，报出错误：Am 查看详情
开发中遇到的问题及解决方案
使用cocoapods集成第三方框架时提示[!]Thedependency`DTCoreText`isnotusedinanyconcretetarget.解决方案：podfile文件中的内容格式需要修改platform:ios,‘8.0‘#use_frameworks!个别需要用到它，比如reactiveCocoatarget‘MyApp‘dopod‘AFNetworking‘,‘~>2. 查看详情
移动端制作中可能遇到的一些问题及解决方法
...的元素添加以下样式。-weblit-user-select:text;在IOS设备应用实际开发中，按钮可能采用input的t 查看详情
使用scrapy编写爬虫程序中遇到的问题及解决方案记录(代码片段)
1、创建与域名不一致的Request时，请求会报错解决方法：创建时Request时加上参数dont_filter=True2、当遇到爬取失败（对方反爬检测或网络问题等）时，重试，做法为在解析response时判断response特征，失败时yieldRequest(response.url)，但是... 查看详情
git使用具体解释egit使用过程中遇到的问题及解决的方法
1. Git错误non-fast-forward后的冲突解决问题（Non-fast-forward）的出现原因在于：git仓库中已经有一部分代码，所以它不同意你直接把你的代码覆盖上去。于是你有2个选择方式：1.强推，即利用强覆盖方式用你本地的代码... 查看详情
highcharts使用时遇到的问题及解决方案
Highcharts使用时遇到的问题及解决方案Highcharts图表控件功能强大，对细节处理得很细致，是目前使用最为广泛的图表控件。本文总结了作者在使用Highcharts时遇到的问题及解决方案。1. 图表颜色设置图表的边框色，背景色及点... 查看详情
dhcp实际使用两个问题的解决办法及实验验证
...文章讲到了DHCP的工作原理、工作过程以及实验验证，在实际使用过程中，还存在两个问题：（1）与DHCP服务器不在一个网段的主机如何自动获取IP地址（DHCPDISCOVER是以广播方式进行的，其情形只能在同一网段之内进行，因为路由... 查看详情
项目中遇到的超卖问题及解决办法（使用go做测试工具）
超卖问题：在一个很短的时间内，Mysql的数据状态在取出，比较，提交，或修改中，另外一个进程访问数据导致的超卖问题。 案例： 1.前端没有做限制，如果用户连续点击签到，那么会有多条数据发送到后端，... 查看详情
在vs2013中使用boost库遇到的问题及解决（转）
...ina.net/SunLightJuly/blog/676891?p=1 最近的项目需要集成一个使用了boost库的开源库。原本应该是比较简单的工作，因为使用的是VS2013，而boost库是最新下载的1.60.0版本(注：写这篇文章时1.61.0刚好release)，结果还是费了一点工夫。现... 查看详情
android性能优化之leakcanary的使用及项目中的实际运用(代码片段)
...？3.什么是LeakCanary？4.LeakCanary工作机制(原理)5.项目中的实际运用场景及分析方法6.总结引言Andorid项目中我们会使用第三方开源库来检查内存泄露情况，使用时我们得了解其运行原理，并根据反馈日志分析定位问题，并以此解决... 查看详情
将aar发布到jcenter仓库遇到的问题及解决方案
前言有一段时间没有写博客了,最近生活的事情比较多,忙来忙去的,等闲下来时发现自己有些懒惰了,生活还要继续,要继续努力,加油~最近公司想把封装好的库放到Jcenter中,方便使用,于是便研究了一下.过程还是比较曲折的,遇到了各... 查看详情
嵌套fragment的使用及遇到thespecifiedchildalreadyhasaparent.youmustcallremoveview()问题的解决
...了“TabActivitywasdeprecatedinAPIlevel13."，并且建议大家使用Fragment。所以学习了嵌套Fragment的使用，参考了这个博客中的相关思路和代码。 在Android 查看详情
项目中遇到的某些问题及解决办法
简介 该博文记录了一些平时在工作中遇到的问题及解决办法，某些问题有解决办法，某些问题暂时没有解决办法，如果有大神知道的，请多多指点。如果某些问题有更好的解决办法，也请指教。正文1、在一个方法中用... 查看详情
手机端页面在项目中遇到的一些问题及解决办法(代码片段)
...加了height:100%,然后就可能造成IOS上页面滑动的卡顿问题。解决方案是： (1)看是否能把body和html的height:100%去除掉。(2)在滚动的容器中增加：-webkit-overflow-scrolling:touch或者给body增加：bod 查看详情
使用tensorflowobject_detectionapi训练自己的数据遇到的问题及解决方法
1.Windows下出现找不到object_detection包的问题。解决方法 在Anaconda3\soft\Lib\site-packages新建一个pth文件，将PedestrianDetection文件夹和slim文件夹路径写入。2.训练中出现的问题①raiseValueError(‘Firststepcannotbezero.‘)ValueError:Firststepcannotb 查看详情
前端开发过程中遇到过啥困难？
...突出了自己的学习nuxt等新技术的能力3、另外也是有很多实际的开发问题不好解决，的但是那些自己解决不好的问题不适合在面试的过程中说的参考技术A可以说说样式上的困难和一些难的布局方式 参考技术B一个可以背下来的范... 查看详情
使用composer遇到的问题及解决方法
可以尝试利用composer下载Yii框架，编辑composer.json文件：{"require":{"yiisoft/yii2":"~2.0.0"}} 然后在这个包含composer.json文件的目录下执行命令：composerinstall 然后就等待下载完成 问题零：Yourrequirementscouldnotberesolvedtoanin... 查看详情