jquery image-map resizing

我写了这个函数来重新调整元素在onLoad的位置，并且用户应该调整他们的浏览器窗口。它在onLoad上正常工作，但在窗口大小调整时不能正确重新计算。我究竟做错了什么？jquery image-map resizing

var orig_width = jQuery("#imageMaps").attr("width");  

     function sizing() { 

       var pic = jQuery('#imageMaps'); 

       var curr_width = pic.width();  

       if (orig_width > curr_width) {  
       var width_ratio = orig_width/curr_width; 
       } 

       else if (orig_width < curr_width) { 
        var width_ratio = curr_width/orig_width; 
       } 

       var width_ratio_dec = parseFloat(width_ratio).toFixed(2);  alert(width_ratio_dec); 

      jQuery("area").each(function() { 
      var pairs = jQuery(this).attr("coords").split(', '); 
      for(var i=0; i<pairs.length; i++) { 
       var nums = pairs[i].split(','); 
       for(var j=0; j<nums.length; j++) { 
        if (orig_width > curr_width) { 
         nums[j] = nums[j]/width_ratio_dec; 
        } 
        else if (orig_width < curr_width) { 
         nums[j] = nums[j] * width_ratio_dec; 
        } 
        else if (orig_width == curr_width) { 
         nums[j] 
        } 

       } 
         pairs[i] = nums.join(','); 
      } 
      jQuery(this).attr("coords", pairs.join(', ')); 
      }); 
     } 

     jQuery(document).ready(sizing); 
     jQuery(window).resize(sizing);

这是HTML：

<img class="alignnone size-full wp-image-430" id="imageMaps" src="SItePlan.gif" width="1500" height="1230" alt="Toledo Beach Marina Map" usemap="#flushometer" border="0" /> 

<map name="flushometer" id="flushometer"> 

<area shape="circle" coords="515,313,11" href="#" alt="" /> 
<area shape="circle" coords="910,115,11" href="#" alt="" /> 
<area shape="circle" coords="948,130,11" href="#" alt="" /> 
<area shape="circle" coords="1013,126,11" href="#" alt="" /> 
<area shape="circle" coords="928,375,11" href="#" alt="" /> 
<area shape="circle" coords="1252,339,11" href="#" alt="" /> 
<area shape="circle" coords="434,638,11" href="#" alt="" /> 
<area shape="circle" coords="761,684,11" href="#" alt="" /> 
<area shape="circle" coords="462,744,11" href="#" alt="" /> 
<area shape="circle" coords="361,790,11" href="#" alt="" /> 
<area shape="circle" coords="341,802,11" href="#" alt="" /> 
<area shape="circle" coords="310,827,11" href="#" alt="" /> 
<area shape="circle" coords="721,774,11" href="#" alt="" /> 
<area shape="circle" coords="835,799,11" href="#" alt="" /> 
<area shape="circle" coords="784,813,11" href="#" alt="" /> 
<area shape="circle" coords="793,865,11" href="#" alt="" /> 
<area shape="circle" coords="880,864,11" href="#" alt="" /> 
<area shape="circle" coords="1033,872,11" href="#" alt="" /> 
<area shape="circle" coords="444,367,11" href="#" alt="" /> 

</map>

来源

2012-02-02 MG1

你明白了什么，当你'的console.log（curr_width）;'只需设置变量（当浏览器调整大小）后？ – Jasper 2012-02-02 17:53:37

我在这里假设您在调整窗口大小的同时调整图像大小。如果没有，那么这是毫无意义的代码，但是这是一个整理和（我相信）工作版本你的帖子...

var orig_width = 0; 

function sizing() { 
    if (orig_width == 0) return; 

    var pic = $('#imageMaps'); 
    var curr_width = pic.width();  
    var ratio = curr_width/orig_width; 

    $("area").each(function() { 

     var pairs = $(this).attr("coords").split(', '); 

     for(var i=0; i<pairs.length; i++) { 

      var nums = pairs[i].split(','); 

      for(var j=0; j<nums.length; j++) { 
       nums[j] = nums[j] * ratio; 
      } 

      pairs[i] = nums.join(','); 
     } 
     $(this).attr("coords", pairs.join(",")); 
    }); 
    orig_width = curr_width; 
} 

$("#imageMaps").one("load", function() { 
    orig_width = $("#imageMaps").attr("width");  
    $(window).resize(sizing); 
}).each(function() { 
    if (this.complete) $(this).load(); 
});

注意，我只用ratio，因为你不需要知道图像比它大或小 - 它只是不同或它是相同的（比率== 1）。

唯一值得注意的是它在运行后sets orig_width = curr_width，以便计算出图像当前大小的比例，而不是下次发生大小调整事件时的原始大小。

来源

2012-02-02 18:04:15 Archer

谢谢，但这只适用于调整大小，但不是onLoad。 – MG1 2012-02-02 18:49:14

我得到这个工作，加入：jQuery（document）.ready（sizing）; – MG1 2012-02-02 19:21:21

看起来为比是基于在img的原始宽度计算，而COORDS的重新计算是基于当前COORDS。您应该捕捉原始坐标（可能在多维数组中）以进行检查，或在更改大小和映射后重置orig_width的大小。

来源

2012-02-02 17:57:20

窗口大小调整事件不会调整图像的大小。这似乎是onWindowResize你想调整图像，然后用他们的新计算绘制点。

来源

2012-02-02 17:59:54 sinemetu1

这个捎带的答案是Archer提供。

在我的情况下，我不仅需要调整图像大小，还需要调整图像大小以便与容器同时匹配。我通过匹配包含图像的div的大小来做到这一点。

//resize image map on jobs page 
     var mapWidth = $("div#main").width(); 

     $("#imageMaps").one("load", function() { 
      orig_width = $("#imageMaps").attr("width"); 
      $("#imageMaps").attr("width", mapWidth); 
      sizing(); 
     }).each(function() { 
      if (this.complete) $(this).load(); 
     });

来源

2014-05-06 17:12:11 Stan

jquery image-map resizing

回答

相关问题