html锚点 map,锚点自适应(示例代码)

前段代码首先要使图片和锚点进行关联

js代码：

adjust();

//获取MAP中元素属性

function adjust() {

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

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.clientHeith;//获取页面的高度

var imageWidth = 640; //图片的长宽 (这里可以求出不同屏幕图片的大小)

var imageHeigth = 640;//同上(我这里只写一个固定的长宽)

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;

}

//在补充一下如果图片的宽度填充了这个屏幕，计算的时候可以直接拿屏幕的宽度进行计算。还有锚点的高度要是超出锚点模块将自动隐藏超出的部分。