1

シンプルなロールオーバー画像を作成しようとしており、CSS と JavaScript メソッドを使用して作成しました。ただし、この画像をリンクすることはできません。

CSS バージョン (以下を参照) では、背景画像を使用していましたが、「空の」HTML ブロックでリンクが認識されませんでした。

JS版ではimagesフォルダから画像を呼び出しています。CSS と同様に、リンクは「空の」HTML ブロックでは認識されません。HTML ブロックに画像を配置した瞬間、ロールオーバーが機能しなくなります。

現在、HTMLコードに次のものがあります。ロールオーバーは機能しますが、リンクは機能しません:

<div class="quick-map"><a href="Services/FloorPlan.aspx" onclick="window.open(this.href);return false;">&nbsp;</a></div>

この例では、リンクは機能しますが、ロールオーバーは機能しません。

<div class="quick-map"><a href="Services/FloorPlan.aspx" onmouseover="document.MyImage.src='images/quick-map.png';" onmouseout="document.MyImage.src='images/quick-map-over.png';"><img alt="" src="images/quick-map.png" /></a></div>

どんな提案でも大歓迎です。これは非常に単純なものでなければならず、なぜ機能しないのか理解できません。私はこれを正しく行っていたと誓ったかもしれません...

4

2 に答える 2

0

これを使用してみてください：

<div class="quick-map">
 <a href="Services/FloorPlan.aspx" onmouseover="document.getElementById('MyImage').src='images/quick-map.png';" onmouseout="document.getElementById('MyImage').src='images/quick-map-over.png';">
  <img alt="" src="images/quick-map.png" id="MyImage" />
 </a>
</div>

ページごとに一意であるid必要があることに注意してください。複数の画像がある場合は、異なる ID が必要です。

于 2011-03-18T13:44:24.387 に答える
0

私はちょうどそれを理解しました。CSS で参照している画像に加えて、タグに幅と高さを指定したdisplay: ブロックも指定する必要があることがわかりました。<span>私はそれが何か簡単なことだと知っていました...あなたの助けに感謝します.

于 2011-03-18T14:01:20.647 に答える