window.onresize = adjuest; function adjuest(){ var picw = $(".imgbox img").width(); var pich = $(".imgbox img").height(); var x1 = parseInt(picw*0.28755); var y1 = parseInt(pich*0.511167); var x2 = parseInt(picw*0.39931); var y2 = parseInt(pich*0.5783333); var andx1 = parseInt(picw*0.28755); var andy1 = parseInt(pich*0.62); var andx2 = parseInt(picw*0.39931); var andy2 = parseInt(pich*0.671667); $("#ios").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"') $("#android").attr("coords",'"'+andx1+','+andy1+','+andx2+','+andy2+'"') } adjuest();
事先算出热区的位置如
<area shape="rect" coords="338,308,609,589" href="/" class="box" target="_blank" >
比例参数 = 338/图片在当前电脑的真实宽度
再用window.onresize监听图片,这样在图片大小变化的时候,热区依然在相应的位置
转载于:https://www.cnblogs.com/wanghaonull/p/6586808.html