<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();
}