2

I'm using the JQuery-plugin imagemapster and the code from the authors example at jsfiddle http://jsfiddle.net/jamietre/jQG48 I am able to dynamically resize my imagemap. Now I am trying to center my imagemap horizontally on my page, but I cant get it working. What I have tried so far: adding CSS styles margin-left:auto and margin-right:auto to my image tag.

any help /hint? thanks

JSuar
  • 21,056
  • 4
  • 39
  • 83
Kurt
  • 264
  • 1
  • 7
  • 23
  • Create you own example with JSFiddle. It will be much easier to help you out if we have something to troubleshoot and review. – JSuar Dec 15 '12 at 20:30

1 Answers1

3

Solution 0

I was able to update the imagemapster author's example and obtain the desired result.

CSS

#mapster_wrap_0 {
    margin: 0 auto;
}

Example: http://jsfiddle.net/jQG48/399/.

​mapster_wrap_0 looks auto-generated so there might be a cleaner way to accomplish this centering.

Solution 1

Creating a wrapper div around your map appears to work as well.

<div id="MapWrapper" style="margin:auto; width:75%;">
    <img src="https://github.com/jamietre/ImageMapster/raw/master/examples/images/usa_map_720.png" 
usemap="#usa">
</div>

Example: http://jsfiddle.net/jQG48/400/.

JSuar
  • 21,056
  • 4
  • 39
  • 83
  • addendum: solution 0 works in firefox and opera, not in ie9. solution 1 does not work in any of the tree browsers – Kurt Dec 15 '12 at 21:32
  • Those solutions should point you in a direction to get a cross browser solution. – JSuar Dec 15 '12 at 21:55
  • 1
    addendum2:solution 0 by JSuar plus the following wrapper around the image seems to work in ie9, firefox and opera. wrapper:
    imagemap here
    – Kurt Dec 15 '12 at 23:11