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 
onmouseover="this.src='p2.png'"

使用它而不是 document.images....

于 2012-07-30T15:50:37.863 回答
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 个例子，你的，Said 的，这个）。

PS。您的打开标签是<img ...>，但关闭标签是</a>

于 2012-07-30T15:59:37.070 回答
0

也许如果图像不是那么重，您可以尝试不同的方法，例如声明两个图像并隐藏其中一个。然后，当您滚动可见图像时，使用 javascript 将其隐藏并显示另一个。

于 2012-07-30T16:06:41.363 回答
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 Giulio 正在监视你。

于 2012-07-30T22:08:00.880 回答