关于HTML中map area 热区自适应的js方法问题

咕嘿嘿poi 2021-06-13 10:58:05

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index-18w</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--Fireworks CS5 Dreamweaver CS5 target.  Created Sun Jun 13 01:19:50 GMT+0800 2021-->
</head>
<style>
*{margin: 0; padding: 0; border: 0; }

 img{width: 100%;}

</style>
<body >
	<div>	
		<img name="planetmap" src="index-18w.jpg" id="planetmap" usemap="#planetmap" alt="苏州河十八湾" />
		<map name="planetmap" id="planetmap">
			<area shape="rect" coords="1754,394,1808,523" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1671,273,1725,402" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1785,112,1839,241" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1649,106,1703,235" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1569,161,1623,290" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1474,145,1528,274" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1503,358,1557,487" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1385,283,1439,412" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1436,517,1490,646" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1317,420,1371,549" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1188,536,1242,665" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1250,737,1304,866" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="1139,796,1193,925" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="914,686,968,815" href="http://www.baidu.com" target="_blank" title=" " alt=" " />
			<area shape="rect" coords="595,703,649,832" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="444,847,498,976" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="313,604,367,733" href="http://www.baidu.com" target="_blank" title="" alt="" />
			<area shape="rect" coords="95,356,149,485" href="http://www.baidu.com" target="_blank" title="" alt="" />
		</map>
	</div>
<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>


</body>
</html>

在这个方法中需要把img的100%宽去除变成图片原始大小后才能生效，如何在不去除图片100%宽度的情况使得这个HTML热区自适应生效呢？

PS：图片是1920px的，当图片使用100%适应屏幕大小时，由于窗口大小不够1920px这时候热区自适应未能生效；当去掉图片的100%大小后浏览器按F12切换成移动端模式后这个热区自适应才生效。

简单说就是img在100%大小的情况下PC和移动端的自适应不生效，img图片原始大小时移动端的热区自适应才生效。那么怎么设置JS然img在100%大小的情况下使得PC和移动端的热区自适应同时生效呢？

因为我看原文的img标签也同样用的是100%，而且ID也对过没问题

https://www.cnblogs.com/ypppt/p/13251575.html

...全文