天天看点

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>

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

继续阅读