Html map 实际使用中遇到的问题及解决方案
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Html map 实际使用中遇到的问题及解决方案，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2516字，纯文字阅读大概需要4分钟。
内容图文
前言：百度了一下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);" />
-->
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‘); //获取页面所有的热点区域 4var imgW = $(‘.mapImg‘)[0].naturalWidth || 900; //图片原始尺寸 5var imgW01 = $(‘.mapImg‘)[0].innerWidth || 450; //图片现在尺寸 6var Multiple = imgW01 / imgW; //对应比例 7var _arrS = ‘‘; //存放coords的值 8var _arr = []; //存放coords对应的值 9for (var i = 0; i < mapD.length; i++) { //热点区域的个数10 _arr = [];
11 _arrS = $(mapD[i]).attr(‘coords‘);
12 _arr = _arrS.split(‘,‘);
13//coords值的个数，圆形为3个，方形为4个14for (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定位。额...... 多读几遍就懂！
六、课后作业：
把剩余的三个小圆图标的坐标标出来，并测试没问题？（提示：用PS的 矩形选框工具+信息 可以很容易就找到对应的坐标）
原文：http://www.cnblogs.com/zhengshize/p/7116813.html
内容总结
以上是互联网集市为您收集整理的Html map 实际使用中遇到的问题及解决方案全部内容，希望文章能够帮你解决Html map 实际使用中遇到的问题及解决方案所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。