交互式图像的简单实现

数码时尚

李海涛

　　我们经常在网上看到这种网页特效：网页中的一个按钮本来是一幅图，当你的鼠标指针指向它时又变成了另一幅图，当你的鼠标指针离开它后又恢复成原来的图片。这种效果我们姑且称它为“交互式图像”，它在Dreamweaver里可以通过选择“插入”菜单中“交互式图像”下的同名项目来制作，但这样会产生大量JavaScript代码，影响网页的调用速度，有没有简单的方法呢？当然有！

　　在这里，笔者要介绍一个实现这种特效最简单的方法，它简单到只要一句代码。调用格式如下(所有内容均应在同一行中，下同)：

　　＜img border=0 src='鼠标指向前的图片名' onMouseOver=this.src='鼠标指向时的图片名' onMouseOut=this.src='鼠标离开后的图片名'＞

　　它的使用也很简单，语句示例如下：

　　＜img border=0 src='mouse.gif' onMouseOver=this.src='mouse_over.gif' onMouseOut=this.src='mouse.gif'＞

　　除了前面已提到的效果外，只需修改相应的图片文件名，就可以利用上面的语句实现一些更特殊的效果。比如：原来显示A图，鼠标指向后显示B图，鼠标离开后又变成C图；原来显示A图，鼠标指向和鼠标离开后都变为B图。

　　最后，需要提醒的一点是，大家在使用这条语句时，最好先把需要变换的图片onLoad(预载)一下，也就是对网页源代码中的“＜body＞”语句进行修改，让它成为“＜body onload='mouse_over.gif'＞”。这样当访问者的鼠标指针指向相应图片时，才不会因图片尚未载入而暂时显示空白内容。