图片热区map-area

 自适应图片热区坐标：

　　html:

<div id="imgContainer" >
<img src="../../assets/flow_chart.jpg" id="flowImg" alt="流程图" style="width:100%;height:100%;" usemap="#flowChartImg">
<map name="flowChartImg" id="flowChart"> 　　<area shape="rect" coord="354,10,580,235" alt="购码" title="点击开始购码"/> 　　 <area shape="rect" coord="641,10,802,235" alt="录码" title="点击开始录码"/> 　　 <area shape="rect" coord="869,10,1280,235" alt="购码" title="点击购码"/> 　　　<area shape="rect" coord="1185,403,1583,685" alt="扫码" title="点击进入经销商扫码"/> </map> </div>

　　js:

document.body.onresize = ()=>{
adjust();
};

adjust();

//获取MAP中元素属性
adjust(){
let map = document.getElementById('flowChart');
var element = map.getElementsByTagName('area');
　　var imgWidth = document.getElementById("flowImg").width;
for (var i = 0; i < element.length; i++) {
var item = element[i];
var oldCoords = item.getAttribute('coord');
var newCoords = adjustPosition(imgWidth, oldCoords);
item.setAttribute("coords", newCoords);
}
},
//调整MAP中坐标
adjustPosition(imgWidth, position) {
var each = position.split(",");
for (var i = 0; i < each.length; i++) {
each[i] = Math.round(parseInt(each[i]) * imgWidth / 1600).toString();//x坐标
}
return each.join(",")
}

转载于:https://www.cnblogs.com/rongjuan/p/6949951.html

总结

以上是生活随笔为你收集整理的图片热区map-area的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。