map热区自适应图片大小

map热区自适应图片大小

我的目的是点击一张图片的某一部分,会超链接到对应部分的网址,查阅无数资料,用ps切片转为web存储格式无果,图片不自适应屏幕大小了……后转用map热区,发现如果图片自适应屏幕,那map热区的坐标将改变,于是开始了漫漫长路……
废话不多说,直接上js:

<script src="jquery.imgMap.min.js"></script>
  <p>      
  <img src="tupian.jpg" style="width:100%" alt="" usemap="#map1"/>  
  <map name="map1">  
  <area shape="rect" coords="38, 31, 269, 226" href="https://www.v2ex.com/t/194813"/>  </map>  
  </p>
  <script>$(document).ready(function(e) {    $('img[usemap]').rwdImageMaps();});</script>

下面附上jquery.imgMap.min.js:

;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);

测试通过!完美解决问题!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麻瓜与AI奇遇记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值