在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现:MAP中每个area的坐标也随页面等比例的变化效果。
map area 热区自适应的实现代码
html:
img{
display:block;max-width:1920;width: 100%;border: 0;
}
js:
var initwidth=null,//初始图片宽度
area=document.getElementsByTagName('area'),
initarea=null;//初始数据保存
function init(){//初始化
initwidth=1920;
initarea=new Array(area.length-1);
for(var i=0;i
initarea[i]=area[i].getAttribute("coords");
}
}
function setCoords(){//根据分辨率自适应热区坐标
var width=document.body.offsetWidth,
percent=width/initwidth;
for(var i=0;i
var coords=initarea[i],
arr=coords.split(",");
for(var j=0;j
arr[j] *= percent;
}
area[i].setAttribute("coords",arr.join(","));
}
}
//使用
init();
window.onresize = function () {
setCoords();
}
资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh
大家在实际开发,请参照代码根据直接的需求改进。如果html页面中存在多个图片需要area,请自行封装实现!