2

ImageMapster でイメージ マップを使用しているときに、イメージを垂直方向および水平方向の中央に配置しようとしましたが、うまくいきませんでした。

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

私は追加しました ：

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

しかし、静止画像は一番下にあります。

また、imageMapster のスクリプトで定義されている onMousveOver 効果を作成する必要がありますが、その方法がわかりません。4 つの領域があるため、このような sth が必要ですが、機能しません。

<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 に答える