map area 热区自适应的实现代码
map area 热区自适应的实现代码
html:
1
2
3
4
5
6
7
8
9
10
|
<style> img{ display:block;max-1920; 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> |