jQuery image-map resizing

Question

Я написал эту функцию для перенастройки местоположения элементов onLoad и должен изменить размер окна браузера. Он корректно работает onLoad, но не перерасчитывается правильно, когда размер окна изменяется. Что я делаю не так?

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> 

Answer 1

Я предполагаю, что вы изменяете размер изображения одновременно с изменением размера окна. Если нет, то это бессмысленно код, но это прибрано и (я верю), рабочая версия, что вы сообщений ...

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 после запуска, чтобы он работал с соотношением текущего размера изображения, а не его первоначальным размером в следующий раз при событии изменения размера.

Answer 2

Похоже, что расчеты по соотношению основаны на первоначальных ширинах IMG, в то время как перерасчет координат основаны на текущих координатах. Вы должны зафиксировать исходные координаты (возможно, в многомерном массиве), которые необходимо проверить, или сбросить размер orig_width после изменения размера и отображения.

Answer 3

Событие изменения размера не изменит размер изображения. Казалось бы, onWindowResize вы захотите изменить размер изображения, а затем нарисуйте точки своими новыми вычислениями.

Answer 4

Этот поросенок отступает от ответа, который предоставляется 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(); 
     });