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。

我正在使用 Chrome 20。

这导致我提出以下问题：

  1. 您的 Chrome 版本是什么，您能否在 Safari 中重现该问题？我记得 Webkit 有一个错误，它会非常随机地显示图像......
  2. 您是否准确地发布了代码？您是否 100% 确定没有缺少引号，或者“0”而不是“o”，或者字母大小写有问题？
  3. 当您提交表单时，您的页面（或 iframe）的 URL 是否会同时更改？如果是这样-您的相对路径将不再起作用，您将获得 404。您可以通过设置图像 src 的完整路径来测试它吗？也许还记录当前的网址？
  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 回答