Resize jquery map

Question

I wrote this function to reconfigure the location of the onLoad elements and should resize the browser window. It works correctly onLoad, but does not recalculate correctly when the window size changes. 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 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 assume that you are resizing the image while resizing the window. If not, then this is pointless code, but it’s a convenient and (I think) working version of what you publish ...

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

Please note that I only use ratio , since you do not need to know more or less images than it was - it's just different or the same thing (ratio == 1).

The only thing worth noting is that it sets orig_width = curr_width after launch so that it will work out a ratio with the current image size, and not its original size, the next time there is a resize event.

Answer 2

The ratio calculations seem to be based on the original width img, while the conversion of the coords is based on the current coords. You must fix the original coordinates (possibly in a multidimensional array), or reset the size of orig_width after resizing and displaying.

Answer 3

A window resize event will not resize the image. It would seem that onWindowResize you want to resize the image, and then draw points with your new calculations.

Answer 4

This piggy bank backs away from the answer to Archer .

In my case, I needed not only to resize the image map, but also to resize the image to fit the container at the same time. I did this by matching the size of the div containing the image.

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