1

私は友人のためにサイトをデザインしていて、ほぼ完成していますが、何らかの理由で、私のイメージ マップの参照が何かによって損なわれています。私は高低を調べ、jQuery、CSS、JS スクリプトへの参照を取り出し、なぜそれが機能しないのかについて頭を悩ませています。http://www.toddwhittle.com/jpにあります。[クライアント] をクリックし、右スクロール バーを使用して [プロモーション/コマーシャル/政治] が表示されている場所に移動すると、クライアントのリストの上に画像がポップアップ表示されます。新しいウィンドウにポップアップするはずの YouTube リンクがいくつかある場所があります。しかし、喜びはありません。誰か助けてくれませんか？

前もってありがとう、TW

4

1 に答える 1

0

イメージマップが機能しない場合、ほとんど例外はありません。これは、マップにバインドされた画像が最上位レイヤーではないためです。

レイアウトは次のとおりです。

<dl class="folio">
    <dt></dt>
    <dd class="dt">
        <div id="img1" style="opacity:0;"> ... </div>
        <div id="img2" style="opacity:0;"> ... </div>
        ...
        <div id="img8" class="active"> ... </div>            
        <div id="img9" style="opacity:0;"> ... </div>
    </dd>
</dl>

イメージマップは「アクティブ」なものです。これらはすべてposition: absolutecss からのもので、上下に重ねられています。

を設定しopacity: 0ても、ブラウザーは何かを無視するわけではなく、透過的にするだけです。したがって、イメージマップはその下img9にあり、後でレンダリングされます。

簡単な解決策は、非アクティブなレイヤーを隠すdisplay: none代わりに使用することです。opacity: 0またはz-index: 10、アクティブなレイヤーに (または使用している他のレイヤーよりも高いものを) 設定して、それが一番上にくるようにすることもできます。

于 2012-06-13T10:15:07.940 に答える