html中map area 热区自适应的原生js实现方案

在做自适应网页的时候，如果在图片中使用了热区map。图片可以通过样式实现：图片大小随页面变化，但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现：MAP中每个area的坐标也随页面等比例的变化效果。

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>

大家在实际开发，请参照代码根据直接的需求改进。如果html页面中存在多个图片需要area,请自行封装实现！

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_801