Programmatically change margin of Imagemapster image

Question

I am trying to change problematically margin of Imagemapster image as reaction to re-size window event. Changing size works perfectly (I use resize method of mapster). To which element I should apply new margin? If I apply it to image itself, than image is positioned correctly, but the hotspots are not moved with it. Is that possible at all? (I am using jquery, but javascript solution is fine as well)

Answer 1

ImageMapster creates a div wrapper around the image and removes CSS from the image. The plugin depends on uniform styling between the image and other layered elements in order to create the effects reliably.

I would do one of two things:

1) Apply styles to the wrapper, you can target this using parent:

$('#my-image').parent();

2) Just create your own wrapper around the image in the first place and target that with your style changes instead:

<div id="my-image-wrapper">
    <img src="..." id="my-image">
</div>

Either should work fine; the 2nd is probably easiest just because it avoids having to worry at all about what happens to the image when it gets bound by imagemapster.