ULTRADEV经典之旅-动态菜单实战（3）
center> 第二部分：行为（Behaviors）
行为（Behaviors）- 转换图片
使用行为（Behaviors）用来构造我们的菜单，可以在DREAMWEAVER ULTRADEV中制作标准的转换效果，让我们一步步要学习如何建立它。
图片的转换...
效果：移动鼠标到页面顶端控制下拉菜单的触发按钮上，按钮由白色的 1图 变成了蓝色的 2图 ，并且下拉菜单中的文字从灰色变成了白色，再看一下：
没有转换前1图状态下的效果：
鼠标移上去图片转换，并且出现下拉菜单的效果：
给图片命名
在我们建立包含下拉菜单的层之前，我们插入了1图，这里我们需要给它们命名，您会说“它们不是已经有名字了吗”，是的，但您还必须在Javascript Behaviors（行为）中给它们定义名称，它们必须拥有自己的IDs才能被正确地触发。选择第一个叫做“main menu”图片，如下图所示：在属性面板中左上角的字段框中填入它的名字，即 menbut1。
图 1
接着重复这个步骤，给其它的1 图片按 menbut2、 menbut3、 menbut4 的顺序给它们分别命名。
给图片增加行为（Behaviors）……
给图片增加行为（Behaviors）
1、选择第一个图片“选择菜单”；
2、打开行为（Behavior）面板(F8)；
3、确认图片被选中，点击 [+] 标记增加行为（behavior）；
4、从行为（Behaviors） 菜单中选择转换图片（ Swap Image） 。
当转换图形面板（Swap Image Panel） 打开后，menbut1 已处于被选取中状态，但在目标图片框（The Set Source）字段中是空的，载入图扯（Preload Images）和鼠标移走后恢复图片（Restore Images onMouseOut>选项将会被我? 择。
1、点击浏览（Browse）按钮选择这个1图所对应的2图，在这里。按照我们预先设定，我们选择images文件夹下over文件夹中的menu1trig.gif；
图 2
2、确保载入图片（ Preload Images ）项已选定，而恢复图片（ Restore Images....）项不要选定； 3、继续选择 image "menbut2" in layer "triggers"，同样目标图片框（ Set Source to ）字段是空的；
4、再次点击浏览（Browse）铵钮为 menbut2 .选择它的 1图，为什么是1图而不是象上面menbut1 那样选择2图呢？ 当用户将鼠标指向一个触发按钮时，这铵钮将由1图转换到2图，同时其它按钮是不作任何变化的，所以该层中的图还是选择1图；
5、选择image "menbut3" in layer "triggers"并选择它的1图；
6、点击OK 完成；
7、第四个触发按钮，过会我们再去处理。 给Menus2和Menus3增加转换效果
1、按照下面表格中的逻辑重复上面的2-6步骤；
2、记住不要选择（鼠标移走后恢复图片）Restore Images onMouseOut 、
表 1
|
转换最后一个图片……
转换最后一个图片
图3的示意是如何来转换 图片4 的，根据上面表格中的逻辑，在这里，我们为这个特殊的转换选择了恢复（Restore Images onMouseOut）选项。
图 3
在上面的面板中，我们是转换了menbut1, menbut2,和 menbut3 到它们的 1图 状态， 转换 menbut4 到它的 2图；我们前面的三个图片的转换没有影响到 menbut4，为什么呢？因为我们使用了恢复（Restore...）特性使 menbut4 从 1图 转换到了2图。
为什么不在前三个触发按钮图片上使用恢复（restore...）特征呢？
当移动到任何一个按钮上时，下拉菜单就会出现，记住，下位菜单包含了一个表格，表格的首行使用了背景图片以使上下看起来有一种连续的关系，怎么样？作为一个实例，我们制作按钮时，如果使用使用了恢复 （Restore...）特征，你会发现这样的菜单，当鼠标一离开按钮到了下拉菜单的时候，按钮图又从2图转换到了1图，破坏了视觉效果。
更多的转换效果……
行为（Behaviors）- 更多的转换效果
使用一个很大的GIF图片
在 menucloser 层中插入透明的 Shim.gif，将它的属性宽度和高度分别设成99%、100%；这个图片用来包含一个行为（Behaviors），而这个行为（Behaviors）可以使鼠标离开按钮时隐藏下拉菜单；也用来恢复前三个转换图到1图。现在我们打开（F11）层面板，选择层menucloser；
在层中点击选择图片，继续...
1、选择 shim.gif 后按 F8打开行为面板（Behaviors palette）；
2、点击 [+] 标记增加一个行为（Behaviors）；
3、选择转换图片（ Swap Image）；
4、在层 "triggers"选择 "menbut1"；
5、点击浏览（ Browse） 按钮浏览对应的1图；（在这里的位置是 images / up / menu1trig.gif）
6、在层 "triggers"中选择 "menbut2" ，点击浏览（ Browse） 按钮浏览对应的1图；
7、在层 "triggers"中选择 "menbut3" ，点击浏览（ Browse） 按钮浏览对应的1图；
8、确定载入图片（Preload Images）选项被选择，而恢复（Restore Images onMouseOut）没有选择；
9、点击完成（OK）
这个行为（Behaviors）给3个图片增加了转换，即 menbut1-menbut2-menbut3 恢复到1图状态，我们不用设置menbut4，因为它自身已经包含了一个把自己恢复到初始状态的行为。
层的隐藏和显示（Hiding and Showing）……
