锚点自适应

Posted 2020-08-19

 

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

<div class="_renwu_Img">
<img src="/Images/Category.jpg" id="CETU" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect"  coords="10,10,300,300"  onclick="btnClick()" />
<area shape="rect" coords="330,10,640,320" />
<area shape="rect"  coords="10,330,330,660"  />
<area shape="rect" coords="330,330,660,660"  />
</map>
<div>

js代码：

<script type="text/javascript">

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;
}

</script>

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