图片热区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