图片热区自适应屏幕大小 通用代码

<img class="img-link" src="https://jdxl-img.jdxlt.com/uploads/40e44122152f4d89bf17308777d3c09d.gif" border="0" usemap="#map7591222054" alt="" />
<map name="map7591222054" id="map7591222054"><area shape="rect" coords="1,167,214,261" href="https://op.jiandanxinli.com/daily/820qx/index.htm " target="_blank" title="" alt=""></area><area shape="rect" coords="1,309,214,402" href="https://op.jiandanxinli.com/adv/lexiangqixi_cp1/index.htm?vision=2" target="_blank" title="" alt=""></area><area shape="rect" coords="1,453,215,544" href="https://op.jiandanxinli.com/daily/qixi_promotion_dazhong/index.htm" target="_blank" title="" alt=""></area><area shape="rect" coords="6,604,224,810" href="https://op.jiandanxinli.com/daily/0825zhishipai/index.htm" target="_blank" title="" alt=""></area><area shape="rect" coords="1,874,291,972" href="https://op.jiandanxinli.com/daily/0825caidan/index.htm" target="_blank" title="" alt=""></area><area shape="rect" coords="430,835,749,983" href="https://op.jiandanxinli.com/daily/0825liaoliao/index.htm" target="_blank" title="" alt=""></area></map>

.img-link{display:block;width: 100%;border: 0;}

热区按照多少比例写的。初始化为多少就好了·~ 其他不用改

var initwidth=null,//初始图片宽度
area=document.getElementsByTagName('area'),
initarea=null;//初始数据保存
console.log(area);
function init(){//初始化
        initwidth=750; // 热区按照多少比例写的。这里初始化为多少就好了·~
        initarea=new Array(area.length-1);
        for(var i=0;i<area.length;i++){
                initarea[i]=area[i].getAttribute("coords");
        }
}

function setCoords(){//根据分辨率自适应热区坐标
    var width=document.body.offsetWidth,
        percent=width/initwidth;
    for(var i=0;i<area.length;i++){
        var coords=initarea[i],
                arr=coords.split(",");
        for(var j=0;j<arr.length;j++){
            arr[j] *= percent;
        }
        area[i].setAttribute("coords",arr.join(","));
        console.log(area[i]);
    }
}
//使用
init();
setCoords();
window.onload = function () {
    setCoords();
}