ImageMapster - image doesn't center vertically + how to make mouseOver effect? - image

Question

I've tried to center vertically and horizontally my image while using image map with ImageMapster, but it didn't work.
http://eternidad.home.pl/index_proba.html
I've added :
#mapster_wrap_0 img{margin: 0 auto; align: center; vertical-valign: middle;}
But still image is on the bottom.
I also need to make onMousveOver effect, definied in the imageMapster's script,but I simply don't know how to do it - I have 4 areas, so I need sth like this, but it doesn't work.
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgAry= ['str_glowna5.png','str_glowna5pl.png','str_glowna5en.png','str_glowna5es.png','str_glowna5ru.png']
var MapAry=[];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
MapAry[zxc0]=new Image();
MapAry[zxc0].src=ImgAry[zxc0];
}
function Swap(id,nu){
document.getElementById(id).src=MapAry[nu].src;
}
/*]]>*/
</script>
//
<AREA SHAPE="RECT" coords="24,509,85,566" HREF="opis_ru.htm" TITLE="Russian" onmouseover="Swap('img',4);" onmouseout="Swap('img',0);" >
Please, help

Answer 1

Generally speaking to use CSS on an image that is bound with imagemapster you should apply styles to a wrapper, and not the image itself e.g.
-- CSS
.mapster-wrapper {
style="margin: 0 auto; align: center; vertical-valign: middle;"
}
-- HTML
<div class="mapster-wrapper">
<img usemap="..." src="...">
<div>
ImageMapster has to tightly control the CSS on the image itself in order for its layered effects to work. Just apply all your styling to your own wrapper around of the image.

Answer 2

It's possible to add a custom class to the wrapper that imagemapster creates:
$('#my_img').mapster({
(...)
wrapClass: 'imageMapster_wrapper'
});
then you just do
.imageMapster_wrapper {
margin:0px auto;
}
in your CSS, as Jamie Treworgy already suggested.