為圖片添加MAP：

/>

/>

/>

/>

圖片大小隨頁面變化，需要MAP中每個area的坐標也隨頁面等比例變化。

Javascript實現：

adjust();

var timeout = null;//onresize觸發次數過多，設置定時器

window.onresize = function () {

clearTimeout(timeout);

timeout = setTimeout(function () { window.location.reload(); }, 100);//頁面大小變化，重新加載頁面以刷新MAP

}

//獲取MAP中元素屬性

function adjust() {

var map = document.getElementById("CribMap");

var element = map.childNodes;

var itemNumber = element.length / 2;

for (var i = 0; i < itemNumber - 1; i++) {

var item = 2 * i + 1;

var oldCoords = element[item].coords;

var newcoords = adjustPosition(oldCoords);

element[item].setAttribute("coords", newcoords);

}

var test = element;

}

//調整MAP中坐標

function adjustPosition(position) {

var pageWidth = document.body.clientWidth;//獲取頁面寬度

var pageHeith = document.body.clientHeight;//獲取頁面高度

var imageWidth = 1160; //圖片的長寬

var imageHeigth = 990;

var each = position.split(",");

//獲取每個坐標點

for (var i = 0; i < each.length; i++) {

each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐標

i++;

each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐標

}

//生成新的坐標點

var newPosition = "";

for (var i = 0; i < each.length; i++) {

newPosition += each[i];

if (i < each.length - 1) {

newPosition += ",";

}

}

return newPosition;

}

---------------------

作者：CoolBadger

來源：CSDN

原文：https://blog.csdn.net/crystalwood/article/details/13533401

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

總結

以上是生活随笔為你收集整理的HTML坐标不随着屏幕大小改变,HTML热区map坐标，随窗口大小自适应办法（javascript）...的全部內容，希望文章能夠幫你解決所遇到的問題。

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