Html map使用实例教程

问题一：如果图片原始尺寸是900px，但是你展示的尺寸是450px,那map就定位不准了，怎么破？

问题二：如果一个页面有多张图片需要map，怎么做？

一、素材图片：

1、这是一张900px的素材图片，我们要让右下角4个小圆图标可以点击。

二、HTML结构：

1、coords的对应坐标不用变，只需在JS里面改变其比例就OK！

1 div >
 2、如果有多张图片，一张图片对应一个map，html' target='_blank'>class不用变，改变map的name值和对应的usemap值就好。name=usemap他们俩是一对CP哦，不要分开它们，给他们一样的值。
 1 div >
 
三、样式表：
 ！@#￥%…… *？（404）
四、JS设置图片的比例：（ 记得引用jquery: script src= /uploads/allimg/190514/133Z04934-1.jpg /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使用实例教程的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。