?自適應圖片熱區坐標：

　　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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。