為圖片添加MAP：

/>

/>

/>

/>

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

Javascript實現(xiàn)：

adjust();

var timeout = null;//onresize觸發(fā)次數(shù)過多，設(shè)置定時器

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;

}

//調(diào)整MAP中坐標(biāo)

function adjustPosition(position) {

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

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

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

var imageHeigth = 990;

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

//獲取每個坐標(biāo)點

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

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

i++;

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

}

//生成新的坐標(biāo)點

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

版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。