图片热区map随屏幕自适应图片大小的方法

时间：2018-05-18 17:47:16

分类：优秀文章

在一些图片上需要加入异形链接，例如下图，按钮过于不规则，无法用a标签来实现，我们就可以通过图片热区实现，通过对图片追加map属性实现自定义的热区。这在过去式非常实用的办法，但现在用户的浏览需求越来越多样化，不再局限于pc屏幕上的固定尺寸，还有可能是平板电脑、手机，尺寸无法固定。

而图片热区是不支持通过百分比来实现的，这对页面的多终端访问造成了障碍。

微信截图_20180518175817.jpg

不过强大的js可以帮助我们，通过js获得屏幕及图片尺寸，并对热区进行重计算来实现热区的尺寸变化。

下面是代码，要注意其中图片尺寸的设置。

折叠XML/HTML 代码
  1. <img src="/skin/images/nav.png" alt="" width="375" usemap="#Map" style="float:left"/>  
  2. <map name="Map" id="CribMap">  
  3.   <area shape="poly" coords="290,404,221,561,360,580,372,494,371,406" href="#1">  
  4.   <area shape="poly" coords="65,402,225,340,244,374,281,398,213,556,125,495" href="#2">  
  5.   <area shape="poly" coords="181,249,173,287,181,332,19,395,4,292,23,183" href="#3">  
  6.   <area shape="poly" coords="227,240,68,172,128,85,221,23,283,185,251,203" href="#4">  
  7.   <area shape="poly" coords="293,179,230,18,302,5,372,4,372,178,336,171" href="#5">  
  8. </map>  
  9.  </div>  
  10. </div>  
  11. <script type="text/javascript">    
  12.  adjust();  
  13.   
  14.         var timeout = null;//onresize触发次数过多，设置定时器  
  15.         window.onresize = function () {  
  16.             clearTimeout(timeout);  
  17.             timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化，重新加载页面以刷新MAP  
  18.         }  
  19.   
  20.         //获取MAP中元素属性  
  21.         function adjust() {  
  22.             var map = document.getElementById("CribMap");  
  23.             var element = map.childNodes;  
  24.             var itemNumber = element.length / 2;  
  25.             for (var i = 0; i < itemNumber - 1; i++) {  
  26.                 var item = 2 * i + 1;  
  27.                 var oldCoords = element[item].coords;  
  28.                 var newcoords = adjustPosition(oldCoords);  
  29.                 element[item].setAttribute("coords", newcoords);  
  30.             }  
  31.             var test = element;  
  32.         }  
  33.   
  34.         //调整MAP中坐标  
  35.         function adjustPosition(position) {  
  36.             var pageWidth = document.body.clientWidth;//获取页面宽度  
  37.             var pageHeith = document.body.clientHeight;//获取页面高度  
  38.   
  39.             var imageWidth = 464;   //图片的长宽  
  40.             var imageHeigth = 830;  
  41.   
  42.             var each = position.split(",");  
  43.             //获取每个坐标点  
  44.             for (var i = 0; i < each.length; i++) {  
  45.                 each[i] = Math.round(parseInt(each[i]) * pageWidth / imageWidth).toString();//x坐标  
  46.                 i++;  
  47.                 each[i] = Math.round(parseInt(each[i]) * pageHeith / imageHeigth).toString();//y坐标  
  48.             }  
  49.             //生成新的坐标点  
  50.             var newPosition = "";  
  51.             for (var i = 0; i < each.length; i++) {  
  52.                 newPosition += each[i];  
  53.                 if (i < each.length - 1) {  
  54.                     newPosition += ",";  
  55.                 }  
  56.             }  
  57.             return newPosition;  
  58.         }  
  59. </script>    

 

 

分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.