map area 热区自适应的实现代码

html:

<style>
img{
    display:block;max-width:1920;width: 100%;border: 0;
}  
</style>
<img src="src/1.jpg" usemap="#planetmap"/>
<map name="planetmap" id="planetmap">
    <area shape="rect" coords="0,0,110,200" href="#"/>
    <area shape="rect" coords="50,50,200,200" href="#"/>
</map>

js:

<script>
var initwidth=null,//初始图片宽度
    area=document.getElementsByTagName('area'),
    initarea=null;//初始数据保存
     
function init(){//初始化
    initwidth=1920;
    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(","));
    }
}
//使用
init();
window.onresize = function () { 
    setCoords();
} 
</script>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。