title: jquery image-map resizing
body: <p>I wrote this function to readjust the location of the  elements onLoad and should the user resize their browser window. It works correctly onLoad but doesn't recalculate correctly when he window is resized.  What am I doing wrong?</p>
  
  <pre><code>var orig_width = jQuery("#imageMaps").attr("width");    
  
          function sizing() { 
  
                var pic = jQuery('#imageMaps');
  
                var curr_width =  pic.width();      
  
                if (orig_width &gt; curr_width) {    
                  var width_ratio = orig_width / curr_width;
                }
  
                else if (orig_width &lt; 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&lt;pairs.length; i++) {
                  var nums = pairs[i].split(','); 
                  for(var j=0; j&lt;nums.length; j++) { 
                      if (orig_width &gt; curr_width) {
                          nums[j] = nums[j] / width_ratio_dec; 
                      }
                      else if (orig_width &lt; 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);
  </code></pre>
  
  <p>This is the html:</p>
  
  <pre><code>    &lt;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" /&gt;
  
  &lt;map name="flushometer" id="flushometer"&gt; 
  
  &lt;area shape="circle" coords="515,313,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="910,115,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="948,130,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="1013,126,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="928,375,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="1252,339,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="434,638,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="761,684,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="462,744,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="361,790,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="341,802,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="310,827,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="721,774,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="835,799,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="784,813,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="793,865,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="880,864,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="1033,872,11" href="#" alt="" /&gt;
  &lt;area shape="circle" coords="444,367,11" href="#" alt="" /&gt;
  
  &lt;/map&gt;
  </code></pre>