H5area的热区锚点随着图片的尺寸而变化

最新推荐文章于 2024-02-20 15:31:47 发布

转载最新推荐文章于 2024-02-20 15:31:47 发布 · 972 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript动态调整HTML中图片热点区域的方法。通过计算图片的实际尺寸，并按比例设置热点区域的位置，确保了交互区域的准确性。适用于不同分辨率和设备。

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

 1 <area shape="rect" coords="338,308,609,589" >
 2 
 3 <img id="pic" src="pic.jpg" alt="" usemap="#Map" width="1920" height="1080" />
 4 
 5 
 6 <area shape="rect" coords="338,308,609,589" href="/" class="box" target="_blank"/>
 7 
 8 
 9 var picw = $("#pic").width();
10 var pich = $("#pic").height();
11 var x1 = parseInt(picw*0.1820);
12 var y1 = parseInt(pich*0.2955);
13 var x2 = parseInt(picw*0.3280);
14 var y2 = parseInt(pich*0.5645);
15 $(".box").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"')