0

いくつかのエリアを含むイメージマップを作成しました。

特定の領域にカーソルを合わせると、その上にスタンプが表示されます。これはChromeでは完璧に機能しますが、FirefoxやIEでは機能しません。

これが機能しない理由について何かアドバイスはありますか？
HTML：

<area class="name sold" 
      shape="poly" 
      coords="121,282,101,277,93,259,93,231,103,212,131,207,157,229,149,272," 
      href="#" alt="" title="" />

CSS：

.name 
{
    position: absolute;
    top: 225px;
    left: 50px;
    display: block;
    width: 150px;
    height: 150px;
    z-index: -100;
}
.name.sold:hover 
{
    background-image: url('sold.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 100;
}
.name.sale:hover 
{
    background-image: url('forsale.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 100;
}

この領域は機能しますが、その領域にカーソルを合わせると何も実行されません。

ここでの実例：http： //jonasgeuens.be/test/

4

1 に答える 1

0

私は間違っているかもしれませんが、イメージ マップがここでやろうとしていること、つまり元のイメージ マップの上に小さなイメージを配置することはできないと思います。

ここでの通常のプラクティスは、おそらく JavaScript を使用することです。

または、大きな画像を DIV の背景として (または z-index が低い通常の画像として) 配置し、絶対配置とより高い z-index および display:block を使用してリンクをその上に配置することもできます。次に、これらのリンクにカーソルを合わせると、小さな画像を表示できます。

于 2012-09-17T11:51:30.913 に答える