map area 热区自适应的实现代码
html:
| 1 2 3 4 5 6 7 8 9 10 |
<style>
img{
display:block;max-width:1920;width: 100%;border: 0;
}
</style>
<img src="src/1.jpg" usemap="#planetmap"/>
<map name="planetmap" id="planetmap">
<area shape="rect" coords="0,0,110,200" href="#"/>
<area shape="rect" coords="50,50,200,200" href="#"/>
</map>
|
js:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script>
var initwidth=null,//初始图片宽度
area=document.getElementsByTagName('area'),
initarea=null;//初始数据保存
function init(){//初始化
initwidth=1920;
initarea=new Array(area.length-1);
for(var i=0;i<area.length;i++){
initarea[i]=area[i].getAttribute("coords");
}
}
function setCoords(){//根据分辨率自适应热区坐标
var width=document.body.offsetWidth,
percent=width/initwidth;
for(var i=0;i<area.length;i++){
var coords=initarea[i],
arr=coords.split(",");
for(var j=0;j<arr.length;j++){
arr[j] *= percent;
}
area[i].setAttribute("coords",arr.join(","));
}
}
//使用
init();
window.onresize = function () {
setCoords();
}
</script>
|