Question

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?

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);

This is the 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

I’m assuming here that you are resizing the image at the same time as the window resizes. If not then this is pointless code, but this is a tidied and (I believe) working version of what you posts…

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();
});

Note that I only use ratio, as you don’t need to know if the image is larger or smaller than it was – it’s just different or it’s the same (ratio == 1).

The only other thing worth noting is that it sets orig_width = curr_width after running so that it works out the ratio from the image’s current size, not its original size next time there’s a resize event.