map元素area热区坐标自适应窗口大小

最新推荐文章于 2023-10-12 17:31:01 发布

红孩儿2011

最新推荐文章于 2023-10-12 17:31:01 发布

阅读量827

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_26642611/article/details/104843478

本文介绍了一种使用jQuery插件实现响应式图片地图的方法，确保图片大小随页面变化时，地图中的区域坐标能自动调整，保持点击准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片大小随页面变化，需要MAP中每个area的坐标也随页面等比例变化。

 <script src="jquery.rwdImageMaps.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.rwdImageMaps.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);