酷客网JavaScript onMouseOver和onMouseOut事件处理器，如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器。
当鼠标进入页面上被某个元素所占据的区域时，会触发onMouseOver事件。而onMouserOut事件，很显然是在鼠标离开这一区域时触发的。
如下程序清单展示了一个简单的onMouseOver事件处理过程。
<!DOCTYPE html>
<html>
<head>
<title>onMouseOver Demo</title>
</head>
<body>
<img src="image1.png" alt="image 1" onmouseover="alert(′You entered the image!′)" />
</body>
</html>
下图所示的是上述代码的执行结果。如果把程序中的onmouseover替换为onmouseout，就会在鼠标离开图像区域（而不是在进入）时触发事件处理器，从而弹出警告对话框。
实现图像翻滚
利用onMouseOver和onMouseOut事件处理器可以在鼠标位于图像上方时改变图像的显示方式。为此，当鼠标进入图像区域时，可以利用onMouseOver改变<1img1>元素的src属性；而当鼠标离开时，利用onMouseOut再把这个属性修改回来。代码如下程序所示，利用onMouseOver和onMouseOut实现图像翻滚。
<!DOCTYPE html>
<html>
<head>
<title>OnMouseOver Demo</title>
<body>
<img src="tick.gif" alt="tick" onmouseover="this.src=′tick2.gif′;"
onmouseout="this.src=′tick.gif′;" />
</body>
</html>
上述代码中出现了一些新语法，在onMouseOver和onMouseOut的JavaScript语句中，使用了关键字this。
当事件处理器是通过HTML元素的属性添加到页面时，this是指HTML元素本身。本例中指的就是“当前图像”，this.src就是指这个图像对象的src属性。
本例使用了两个图像：tick.gif和tick2.gif。当然，可以使用任何可用的图像，但为了达到最佳效果，两个图像最好具有相同尺寸，而且文件不要太大。
使用编辑软件创建一个HTML文件，使其包含上面程序所示的代码。可以根据实际情况修改图像文件的名称，但要确保所使用的图像和HTML文件位于同一个目录中。保存HTML文件并且在浏览器里打开它。
应该可以看到，当鼠标指针进入时，图像改变；当指针离开时，图像恢复原样，如图所示，利用onMouseOver和onMouseOut实现的图像翻滚。
说明：图像翻滚
这曾经是图像翻滚的经典方式，而现在被更高效的“层叠样式表”（CSS）取代了，但它仍不失为展示onMouseOver和onMouseOut事件处理器的用法的一种方便的方式。我们将在后面的学习中结合JavaScript使用CSS。
酷客网相关文章：
评论前必须登录！
注册