注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

转: HTML热区map坐标,随窗口大小自适应办法(javascript)  

2016-09-02 19:30:05|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

转自:http://blog.csdn.net/crystalwood/article/details/13533401

为图片添加MAP:
[html] view plain copy
  1. <div>  
  2. <span id="lbresult">  
  3. <img src='YardCribGraphic.aspx' width='100%' heigh='100%' usemap='#b0a1a239cbf34d64acf4d6798dd67da0' border='0'/>  
  4. <map id="CribMap" name="b0a1a239cbf34d64acf4d6798dd67da0">  
  5.    <area shape="poly" id="41" coords="244,90,244,210,322,210,295,150,322,90" href="#" title="垛位名:南2垛位"  
  6. />  
  7.    <area shape="poly" id="43" coords="350,90,350,210,433,210,461,150,405,90" href="#" title="垛位名:垛位3"  
  8. />  
  9.    <area shape="poly" id="42" coords="241,240,241,360,309,360,322,300,295,240" href="#" title="垛位名:北垛位2"  
  10.  />  
  11.    <area shape="poly" id="44" coords="240,390,240,510,364,510,350,450,336,390" href="#" title="垛位名:三堆场001"  
  12.  />  
  13. </map></span>  
  14. </div>  


图片大小随页面变化,需要MAP中每个area的坐标也随页面等比例变化。

Javascript实现:

[javascript] view plain copy
  1. <script type="text/javascript">  
  2.   
  3.         adjust();  
  4.   
  5.         var timeout = null;//onresize触发次数过多,设置定时器  
  6.         window.onresize = function () {  
  7.             clearTimeout(timeout);  
  8.             timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化,重新加载页面以刷新MAP  
  9.         }  
  10.   
  11.         //获取MAP中元素属性  
  12.         function adjust() {  
  13.             var map = document.getElementById("CribMap");  
  14.             var element = map.childNodes;  
  15.             var itemNumber = element.length / 2;  
  16.             for (var i = 0; i < itemNumber - 1; i++) {  
  17.                 var item = 2 * i + 1;  
  18.                 var oldCoords = element[item].coords;  
  19.                 var newcoords = adjustPosition(oldCoords);  
  20.                 element[item].setAttribute("coords", newcoords);  
  21.             }  
  22.             var test = element;  
  23.         }  
  24.   
  25.         //调整MAP中坐标  
  26.         function adjustPosition(position) {  
  27.             var pageWidth = document.body.clientWidth;//获取页面宽度  
  28.             var pageHeith = document.body.clientHeight;//获取页面高度  
  29.   
  30.             var imageWidth = 1160;<span style="white-space:pre">    </span>//图片的长宽  
  31.             var imageHeigth = 990;  
  32.   
  33.             var each = position.split(",");  
  34.             //获取每个坐标点  
  35.             for (var i = 0; i < each.length; i++) {  
  36.                 each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐标  
  37.                 i++;  
  38.                 each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐标  
  39.             }  
  40.             //生成新的坐标点  
  41.             var newPosition = "";  
  42.             for (var i = 0; i < each.length; i++) {  
  43.                 newPosition += each[i];  
  44.                 if (i < each.length - 1) {  
  45.                     newPosition += ",";  
  46.                 }  
  47.             }  
  48.             return newPosition;  
  49.         }  
  50. </script>  

  评论这张
 
阅读(72)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017