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>

資源網站大全 https://55wd.com 設計導航https://www.wode007.com/favorites/sjdh

大家在實際開發，請參照代碼根據直接的需求改進。如果html頁面中存在多個圖片需要area,請自行封裝實現！