2

在将图像映射与 ImageMapster 一起使用时，我尝试将图像垂直和水平居中，但它不起作用。

http://eternidad.home.pl/index_proba.html

我已经添加 ：

 #mapster_wrap_0 img{margin: 0 auto; align: center; vertical-valign: middle;}

但静止图像在底部。

我还需要在 imageMapster 的脚本中定义 onMousveOver 效果，但我根本不知道该怎么做——我有 4 个区域，所以我需要这样的东西，但它不起作用。

<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);" >

请帮忙

4

2 回答 2

1

一般来说，要在与 imagemapster 绑定的图像上使用 CSS，您应该将样式应用于包装器，而不是图像本身，例如

-- CSS

.mapster-wrapper {
    style="margin: 0 auto; align: center; vertical-valign: middle;"
}

-- HTML

<div class="mapster-wrapper">
    <img usemap="..." src="...">
<div>

ImageMapster 必须严格控制图像本身的 CSS 才能使其分层效果起作用。只需将所有样式应用到您自己的图像包装器上。

于 2013-04-11T12:01:20.863 回答
0

可以将自定义类添加到 imagemapster 创建的包装器中：

$('#my_img').mapster({
  (...)
  wrapClass: 'imageMapster_wrapper'
});

那你就做

.imageMapster_wrapper {
   margin:0px auto;
}

正如 Jamie Treworgy 已经建议的那样，在你的 CSS 中。

于 2014-06-05T13:09:33.623 回答