Scale ImageMap coordinates with dynamic sized images

Question

I am looking for a way to make my dynamically scaled images suitable for the image maps that I make. I use jquery to scale images with window size:

$(window).bind("load resize", function(){ $(".post img").height($(window).height()-110); $(".post img").width(($(".post img").newHeight() / $(".post img").oldHeight()) * $(".post img").oldWidth()); }); 

But ImageMaps I stay true to the original size. I look in ImageMapster but cannot figure out how to automatically make all the large-scale images.

This page is for: http://www.dersuawesome.com/home/

Answer 1

In imagemapster you use: $ ('img'). mapster ('resize', width, height, duration);

quote from original imagemapster documentation:

$ ('IMG') Mapster ('size', width, height, duration). --- image: new image width OR height: new image height duration: (optional) 0 | milliseconds (to enliven resizing) This will resize the image map to the specified size. Please note that either the width> or the height must be transferred, and the other is calculated in the same aspect ratio as the original image. If you go through both, only the width will be used to calculate new dimensions: the proportions should remain the same as the original image.

end of quote. eg. when the image should become 900 pixels wide, you use:

 $('img').mapster('resize',900,null,2000); 

Here I told imagemapster to use 2000 milliseconds for this resizing to get a smooth effect. Including this in the onconfigured-section code works well for me:

 onConfigured: function(){ $('img').mapster('resize',900,null,2000); } ,