六

六、 Behavior ——快速实现编程效果 (2)

作 者 : 阿文

例子二：切换图片。

　　我们常常看到一些图片链接，当鼠标点到时就切换成另一幅图片，移开鼠标则又恢复到原始状态。这无疑给页面增加了动感，以往或许我们只能对着这种效果望洋兴叹，而现在 Behavior 预置了这一事件，使得实现它成为轻而易举的事情了。

1 、单击图片按钮，加入一幅原始图片, 选中该图片。

　　2 、在 Properties 面板中，为该图像起一个标识名。
　　注意：这一步是必需要设置的，指定的事件在自动编程过程中将用到这一标识名，因此，这个名字必须符合 JavaScript 中定义变量名的规则，即以字母起头的包含字母或数字的合法变量名。

3 、按“ + ”号按钮选择 Swap Image ，在弹出的对话框中，选择用以切换的另一图像文件名，并选中 Preload Images 和 Restore Images onMouseOut 两项，表明在鼠标滑出图象时恢复成初始图象。按 OK 键确定。

4 、由于指定了恢复初始图象的选项，我们看到在 Behavior 对话框中已经自动地增加了两个事件。
　　当 onMouseOver 时， Swap Image 事件被触发；当 onMouseOut 时， Swap Image Restore 事件被触发。

5 、按 F12 键预览页面，鼠标滑过原图像时，一幅新的图象替换了原来这一幅。

　　鼠标滑出图像所在区域，页面则又恢复为原始图像。