Search code examples
jqueryimagemapster

How to center a (dynamically resizeable) image-map with the imagemapster plug-in

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

Solution

  • 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/.