why is ImageMapster repositioning my image?

[jmjpro]

Before I attach my image to .mapster() I position it as follows:

#background {
            position: absolute;
            left: 142px;
            top: 82px;
        }

Once I attach the image to .mapster() I see that the positioning is removed. Am I using the library incorrectly?

[techfg]

Hello @jmjpro -

Thank you for your inquiry, apologies for the delayed reply and for the trouble you were having with IM!

In short, when IM is applied to an img, it creates a wrapper div around the img and effectively replaces your original img with its own "copy" by adding a new img element to the DOM. Upon doing so, your original img is marked not-visible (opacity === 0). This is done in order to achieve the desired behavior of IM taking control away from the browser for the imagemap itself.

Given this, since you applied your CSS via the id property of your original img, the IM img doesn't adhere to those CSS rules since it does not have that id. By default, IM specifies relative positioning for its wrapper div.

To achieve your desired result, you have a couple of options:

1. Instead of applying your CSS to the img itself, put a div around the img and specify the CSS on your div. Please see this jsFiddle for an example.
2. Utilize the IM configuration option of wrapCss described in the docs and specify the CSS attributes as in this jsFiddle.

One other related note is that IM also has a configuration option wrapClass, however you won't be able to use this in your case. The reason is that although IM would apply the class you specify to the wrapper it creates, IM will also explicitly define the position: relative to the wrapper which will override anything within the class. There is another issue (#358) that is goaled at addressing this and other related situations in order to improve how IM handles CSS & classes.

I hope this helps. If you have any further questions and for future reference, please see our Support page for the best ways to receive general support on IM.