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的原始宽度，而coords的重新计算基于当前的coords。您应该捕获要检查的原始坐标（可能是多维数组），或者在更改尺寸和贴图后重置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();
        });

jquery图像映射调整大小

4 个答案: