0

I am using the ImageMapster jquery script to create an imagemap. The author offers a fiddle showing how to resize the image map responsively. It works if you want your map to take up 100% of the width of the page. However, if you put a bounding container around the map, as I have in the below example (using the author's responsive example), it resizes well past the width of the bounding box. (Try to enlarge your browser when you view the below fiddle). How can I alter this resize code to force the map not to enlarge past the width of its container? Regular css max-width doesn't do it.

Fiddle: http://jsfiddle.net/jQG48/999/

Here's the code he uses to calculate the size:

function resize(maxWidth,maxHeight) {
 var image =  $('img'),
    imgWidth = image.width(),
    imgHeight = image.height(),
    newWidth=0,
    newHeight=0;

if (imgWidth/maxWidth>imgHeight/maxHeight) {
    newWidth = maxWidth;
} else {
    newHeight = maxHeight;
}
image.mapster('resize',newWidth,newHeight,resizeTime);   
}
LBF
  • 1,133
  • 2
  • 14
  • 39

1 Answers1

1

Welp. I'm an idiot. Right after I posted this, I noticed the window resize code references $(window).width. I just changed it to my container div - in this case: $(.content).width and that solved it.

I was going to delete the question, but figured I should leave it in case it helps someone else, since the official ImageMapster example doesn't offer any instructions for this.

Here's a working fiddle:

http://jsfiddle.net/jQG48/1007/

LBF
  • 1,133
  • 2
  • 14
  • 39