jquery 图像映射调整大小

Question

我编写此函数是为了重新调整元素 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，因为您不需要知道图像是比原来大还是小 - 它只是不同或相同(ratio == 1)。

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