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