4

I'm looking for a way to make my dynamically scaled images fit with the image maps i'm making. I'm using jquery to scale the images with the 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 make stay true to the original size. I'm looking in to ImageMapster, but cant figure out how to automatically make all the imagemaps scale.

This is the page it's for: http://www.dersuawesome.com/home/

DERSU awesome
  • 41
  • 1
  • 2

1 Answers1

3

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

citation from the original imagemapster documentation:

$('img').mapster('resize',width,height,duration); --- image: new width of the image OR height: new height of the image duration: (optional) 0 | milliseconds (to animate the resizing) This will resize the image map to the dimensions specified. Note that either width > or height should be passed, and the other will be calculated in the same aspect ratio as the original image. If you pass both, only the width will be used to calculate the new dimensions: the proportions must remain the same as the original image.

end of citation. eg. when an image should become 900 pixel wide you use:

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

Here I told imagemapster to use 2000 milliseconds for this resizeing to get a smooth effect. Putting this into the onconfigured-section of the code works well for me:

onConfigured: function(){
         $('img').mapster('resize',900,null,2000);
        } ,
Kurt
  • 264
  • 1
  • 7
  • 23
  • addendum: the author of imagemapster has a complete resize-example here: http://www.outsharked.com/imagemapster/default.aspx?demos.html#resize – Kurt Jul 29 '12 at 07:12
  • addendum2: another complete example from the author of imagemapster is here: http://jsfiddle.net/jamietre/jQG48/ – Kurt Jul 29 '12 at 07:59
  • But doesn't this resize it to a predetermined size. I need the imagemaps to automatically fit the image size – DERSU awesome Jul 29 '12 at 08:32
  • Maybe I am misunderstanding you. But when I understand your problem correct than the example, which I did mention in my addendum2, should solve your problem. did you take a look at this example? – Kurt Jul 29 '12 at 17:30