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> |
联系客服