map area 热区自适应的实现代码

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>