How to align the jquery maphilight to center?

Question

Hi guys, yes i know how silly and dumb this question is, but i have been looking around and i can't find how to align the image so that i can position it in the middle for the excellent jquery maphilight, what i found is after the class="map" is applied to the image, it will automatically shift to the left.

i can find any options to set the position too. Please help. thanks!!

Answer 1

The reason it changes on you is that the plugin wraps a div around the IMG to contain the canvas element as well as the image. If it creates the same or similar markup in all browsers (I tested this in Safari and Firefox) then this should do what you want:

$('.map').maphighlight().parent().addClass('center-map');

That will add the class .center-map to the parent div that was dynamically created. To get the centering to work I had to set a width on the div to be the same width as the image (otherwise it takes up as much horizontal space as it can, keeping it from centering). Here are my css rules I used when testing:

.center-map {
 margin: 0 auto;
 width: 420px;
}