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

---(文/阿文)

例子二:切换图片。

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

   1 、单击图片按钮,加入一幅原始图片
dw031.gif (7773 字节) ,选中该图片。

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

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

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

  5 、按 F12 键预览页面,鼠标滑过原图像时,一幅新的图象替换了原来这一幅。
dw032.gif (7941 字节)
  鼠标滑出图像所在区域,页面则又恢复为原始图像。