3

ページ上の写真に onmouseover および onmouseout 属性があります。onmouseover と onmouseout を送信すると、画像が失敗します (画像ソースが見つからないアイコンを返します)

<input type="image" src="../../Content/Resources/save.png" onmouseover="mouseOverForImage('save', '../../Content/Resources/save_mouse_over.png')" 
               onmouseout = "mouseOverForImage('save', '../../Content/Resources/save.png')" id="save"
               title = "Save" />

そしてJavascript：

function mouseOverForImage(imgId, imgSrcs) {
        document.getElementById(imgId).src = imgSrcs;
    }
4

3 に答える 3

3

問題をテストするために jsfiddleでページを作成しました (相対パスで画像を表示するには、ページを実行する必要があることに注意してください。これは、すべてのブラウザーで発生している jsfiddle の問題です)。

[+] 画像ボタン ([?] に変わります) にカーソルを合わせてクリックします。ページがロードされている間、マウスオーバー/アウト/オーバー/アウト/オーバー... 何度でも操作できます。画像が変更され、404 は発生しません。

Chrome20を使用しています。

これは、次の質問につながります。

  1. Chrome のバージョンを教えてください。Safari で問題を再現できますか? Webkit には画像がかなりランダムに表示されるバグがあったことを思い出します...
  2. コードを正確に投稿しましたか？引用符の欠落、「o」の代わりに「0」、または大文字と小文字の問題がないことを 100% 確信していますか?
  3. フォームを送信すると、ページ (または iframe) の URL が同時に変更されますか? その場合、相対パスは機能しなくなり、404 が表示されます。イメージの src へのフル パスを設定してテストできますか? たぶん、現在のURLも記録しますか？
  4. 他のコード (onsubmit イベント?) がフォームに干渉する可能性はありますか? さらにコードを投稿したり、問題を再現する jsfiddle を作成したりできますか?
  5. 私たち/私はあなたの問題を正しく理解していますか? :)

ありがとう。

于 2012-06-04T10:50:17.093 に答える
2

このようなものを試すことができます

function mouseOverForImage(imgId, imgSrcs) { 

    var image = new Image(); 

    image.src = imgSrcs; 

    image.onload = function() { 
        document.getElementById(imgId).src = imgSrcs; 
    }; 

}
于 2012-06-05T09:38:38.813 に答える
0

mouseover および mouseout イベントを使用する代わりに、mouseenter および mouseleave を使用してみてください。通常、これらのタイプの問題で機能します。

于 2012-06-04T12:37:51.707 に答える