动态计算area位置

window.onresize = adjuest;
    function adjuest(){
        var picw = $(".imgbox img").width();
        var pich = $(".imgbox img").height();
   
        var x1 = parseInt(picw*0.82004);  // 
        var y1 = parseInt(pich*0.36380);  //
        var x2 = parseInt(picw*0.71700);
        var y2 = parseInt(pich*0.41714);
        var andx1 = parseInt(picw*0.67004);
        var andy1 = parseInt(pich*0.36380);
        var andx2 = parseInt(picw*0.56700);
        var andy2 = parseInt(pich*0.41714);
        $("#ios").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"')
        $("#android").attr("coords",'"'+andx1+','+andy1+','+andx2+','+andy2+'"')
    }
    adjuest(); 

 // 0.82004 = area的x点位置/img的width
其他的类似

<div class="imgbox img_box_4" img-index="4" style="display:none">
    <img src="__PUBLIC__/home/bsk/img/app_07.jpeg" alt="" usemap="#mymap">
    <map name="mymap" >
        <area id="ios" shape="rect" href="" coords="">
        <area id ="android" shape="rect" href="" coords="">
    </map>
</div>

 

转载于:https://www.cnblogs.com/wanghaonull/p/7098730.html