要显示具有鼠标事件的图像翻转，可以尝试运行以下代码-
<html>
<head>
<title>Rollover with a Mouse Event</title>
<script>
<!--
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;" onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>让我们看看我们在上面的示例中使用了什么来使动画自动化-
在加载此页面时，“ if”语句检查图像对象的存在。如果图像对象不可用，则不会执行此块。
的图像()构造函数创建并预加载称为新的图像对象image1的。
src属性被分配了名为/images/html.gif的外部图像文件的名称。
同样，我们创建了一个image2对象，并在该对象中分配了/images/http.gif。
#（井号）会禁用链接，以便浏览器在单击时不会尝试转到URL。该链接是图像。
的onMouseOver当用户的鼠标移动到链路，而触发事件处理程序的onmouseout触发事件处理程序，当用户的从链路（图像）的距离的鼠标移动。