How to resize an image and keep the map coordinates when the container uses text-align: center

[xzuttz]

Hello

My site consists of 1 image. The image is centered using text-align: center; on the parent div.

I am using this code, to resize the image according to the browser size:

http://jsfiddle.net/JpgYm/8/

The problem is that when im using text-align: center on the parent div, the coordinates are off a bit to the left after resizing.

Is there a way to solve this?

http://img20.imageshack.us/img20/4413/skulljy.jpg

[jamietre]

Can you set up a jsfiddle example? I can't think of any reason text-align would affect the coordinate map, I can't reproduce it with a simple case.

[xzuttz]

Thanks for the quick reply

Here you go:

http://jsfiddle.net/F6XFv/2/

[jamietre]

Looks like resize is not resizing the wrapper, definitely a bug. I should be able to fix this today or tomorrow.

[xzuttz]

Im not sure what is causing the problem, but Inspecting the element shows that the canvas has the correct size, but is not moved to the center.

Sounds great, thanks!

[jamietre]

Try the latest build, it should be fixed now.

https://raw.github.com/jamietre/ImageMapster/master/dist/jquery.imagemapster.js

[xzuttz]

I switched the reference to the latest build. I still can't get it to work. Could you please take a look at:

http://jsfiddle.net/F6XFv/4/

http://img403.imageshack.us/img403/6807/imagemapster.jpg

Thanks ! :)

[jamietre]

OK - well - there WAS a problem with resize, but that's not what is wrong in your example. Your image map does not match the image in the first place. The image is 800 x 613 pixels. Two of the areas don't even fall within that boundary. Even if you get rid of "resize" and the text-align formatting, it's still not right.

[xzuttz]

My bad. I was not aware that imageshack resized the original picture. Works like a charm. Thanks a lot!