Dreamweaver行为与滤镜应用

网络与通信

当鼠标移上一个超级链接时,相应的位置以动态效果出现一幅图,而当鼠标移出时图片就会消失,在鼠标移上另一链接时,同样的位置也会以动态效果出现另一幅图,当鼠标移出也会消失。这个效果的制作过程其实并不复杂,只是Dreamweaver行为与滤镜效果的综合应用(本例的具体效果如(图1)所示)。

图1
图1

1.准备好所需的图片,运行Dreamweaver,并做好网页框架。我制作了如(图2)所示的表格,图像显示在右边的单元格里,使单元格的大小和图片一致。由于在这个效果里用到了“层(Layer)”,为了使层在不同的分辨率下不会产生错位,就需要把层嵌入到表格中。在单元格的属性面板上把“Vert”属性设成“Top”,光标就会移到单元格的顶部。然后在单元格里插入两个层(在这里我以两个链接需要此特效为例),方法是“Insert”──“Layer”(不要自己画)要保持层的“L”和“T”参数为空,也就是插入以后不要移动它。然后调整层的大小和图像一致,位置如(图3)所示。
图2
图2
图3
图3

2.在两个层中分别插入图像,选中其中一张并按F10键弹出代码编辑窗口,把代码“”改成“"它的作用是:给图片定义“RevealTrans”动态滤镜,“Duration” 是表示此效果发生的时间值,单位有秒或毫秒,这里的2.0表示时间为2秒。“Transition ”表示特效的种类,有0-23种,在此设为12,其他效果下面再作详细介绍。“ID=p1”是设定标示,以便在使用脚本语言时提供访问标示。“VISIBILITY:hidden”表示图片的可视状态为隐藏。如法炮制另一层中的图片,只是要把“ID=p1”改为“ID=p2”,其他不变。
3.在和之间加入以下滤镜状态控制代码:

对应“ID=p1”的图片。再把“play1”改成“play2”,把“p1”改成“p2”在和之间再次加入,对应“ID=p2”的图片。
4.制作好链接,如“灵渠风光”加上“onMouseOver=play1():”控制行为,如“灵渠风光”意思是当鼠标移上此链接时,ID为p1的图片产生相应的滤镜效果。同样,为另一个链接加上同样的语句,注意要把“onMouseOver=play1():”改成“onMouseOver=play2():”。现在已经可以看到效果了,但是还不能交替产生效果。
5.这一步要为链接加上有关层的行为,选中一个链接,按“Shift+F3”打开行为面板,单击带加号的按钮,选择“Show-Hide Layers”,在弹出的面板上选择响应此链接的图片所在层的名称,单击“Show”,点“OK”,然后在行为面板中选中刚才建立的行为,单击出现的倒三角按钮,把事件改为“OnMouseOver”,如(图4)所示。
图4
图4

然后重复前面的步骤,把“Show”这一步骤改为“Hide”,把事件改为“OnMouseOut”。按照这样的方法为另一链接加上对应另一个层的行为。
6.最后要把两个层的“Vis”属性设成“Hidden”即隐藏,预览一下看看是否达到预期的效果,如果有问题,请检查图片的ID是否重复,代码、链接和图片之间是否建立了正确的关联,如链接中“onMouseOver=play1():”和相应代码“Sub play1()”中的“play1()”应一致。
“RevealTrans”滤镜效果如下
0:矩形缩小;1:矩形扩大;2:圆形缩小;3:圆形扩大;4:向上擦除;5:向下擦除;6:向右擦除;7:向左擦除;8:垂直百页;9:水平百页;10:棋盘状通过;11:棋盘状向下;12:随机融化;13:垂直向内分开;14:垂直向外分开;15:水平向内分开;16:水平向内分开;17:左下条状;18:左上条状;19:右下条状;20:右上条状;21:随机的水平栅栏;22:随机的垂直栅栏;23:随机任意的上述一种效果;
注意,如果“Transition=23”就会随机任意的上述一种效果,很值得一试。