天天看點

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>

這樣圖檔就能實作自适應了

繼續閱讀