六、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
键预览页面,鼠标滑过原图像时,一幅新的图象替换了原来这一幅。
鼠标滑出图像所在区域,页面则又恢复为原始图像。