js动态改变图片热区坐标，手机端图片热区自适应

js动态改变图片热区坐标，手机端图片热区自适应

<img id='banner1' src="images/banner.jpg" usemap="#banner" border="0"/>
<map name="banner" >
<area id='111' shape="rect" coords="x1,y1,x2,y2" href="/swt/">
</map>

 

<script>
var picw = $("#banner1").width();        /获取图片宽度
var pich = $("#banner1").height();
var x1 = parseInt(picw*0.6421);          /计算出坐标与总长度的商，当做参数
var y1 = parseInt(pich*0.3907);
var x2 = parseInt(picw*0.9343);
var y2 = parseInt(pich*0.5189);
$("#111").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"');    /设置area的坐标
</script>

 

这样图片就能实现自适应了

posted on 2015-11-09 18:09 TXXT 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/txxt/p/4950698.html