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

回答

相關問題