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。
酷客网相关文章:
评论前必须登录!
注册