首页 / HTML / Htmlmap使用实例教程
Htmlmap使用实例教程
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Htmlmap使用实例教程,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2674字,纯文字阅读大概需要4分钟。
内容图文
![Htmlmap使用实例教程](/upload/InfoBanner/zyjiaocheng/393/39d81584767444cabde89014bf30a76b.jpg)
问题一:如果图片原始尺寸是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,赋值给原有coords19 $(mapD[i]).attr('coords',_arrS); 20 }21 }22 set_map();
五、总结:
细心的童鞋就会发现,为什么别人给图片都是加ID而我却加class,原因是为了方便多张缩放过的图片使用map定位。额...... 多读几遍就懂!
以上就是Html map使用实例教程的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的Htmlmap使用实例教程全部内容,希望文章能够帮你解决Htmlmap使用实例教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。