0

Internet Explorerでは機能しないが、Chrome、Firefoxなどでは機能するこの単純なコードがあります。これは単純なボタン画像「ロールオーバー」です。

<html>
<head>
</head>
<body>
    <img src="p1.png" name="img1"  onMouseOver="document.images[0].src='p2.png'" onMouseOut="document.images[0].src='p1.png'" ></a>
</body>
</html>

IE 6,7,8 の何が問題になっていますか?

4

5 に答える 5

1

コードを次のように変更します。

<html>
    <head>
    </head>
    <body>

        <img src="p1.png" name="img1"  onMouseOver="this.src='p2.png'" onMouseOut="this.src='p1.png'" />

    </body>
</html>

また、質問で示した HTML ページよりも多くのデータが HTML ページに含まれている場合は、このコードを の先頭に配置して<body>、ロールオーバー画像をプリロードすることをお勧めします。ロールオーバーが機能するようにします（そうしないと、ロールオーバー画像はユーザーが画像にカーソルを合わせたときにのみユーザーのデバイスにダウンロードされ、ロールオーバーにわずかな遅延が発生します（onMouseOver画像サイズによって異なります））：

<img src="p2.png" class="hiddenPic" />
<!-- loading (hidden) rollover image before all the other page data -->

そして、CSShiddenPicクラス コードを追加します。.hiddenPic { display: none; }

ロールオーバー イメージをプリロードする他の方法は、CSSまたはJavaScriptonLoadイベント ハンドラを使用して実行できます。

于 2012-07-30T16:06:49.073 に答える
0

画像がそれほど重くない場合は、両方の画像を宣言して一方を非表示にするなど、別のアプローチを試すことができます。次に、JavaScriptを使用して、表示されている画像をロールオーバーすると、それを非表示にして別の画像を表示します。

于 2012-07-30T16:06:41.363 に答える
0 
onmouseover="this.src='p2.png'"

document.images....の代わりにこれを使用してください。

于 2012-07-30T15:50:37.863 に答える
0

あなたの質問 mr.Stighy の完全に機能するコード:

<html> 
<head> 
  <style type="text/css">
</head> 
<body> 
 <img src="../a_b_c/a.jpg" alt="" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.jpg'" onClick="this.src='c.jpg'" class="style1"></a>
</body> 
</html>

私たちは画像を台無しにしたと思います、それだけです... ps ジュリオがあなたを見ています。

于 2012-07-30T22:08:00.880 に答える
0

別の方法（他の何かをロールオーバーする必要がある場合にも機能します）：

<img src="p1.png" name="img3" id="img3" onMouseOver="document.getElementById('img3').src='p2.png'" onMouseOut="document.getElementById('img3').src='p1.png'" >

http://jsfiddle.net/DNtUY/5/ (3 つの例、あなたのもの、サイードのもの、これ)。

PS。あなたの開始タグはです<img ...>が、終了タグは</a>

于 2012-07-30T15:59:37.070 に答える