除了创建按钮之外，Fireworks 还可以非常方便地帮助用户创建高级的 JavaScript rollover 效果。例如，当鼠标滑过一个按钮的时候，除了按钮的外观发生变化之外，你还可以让页面的其他区域也发生变化。在 Fireworks 中，这种类型的 rollover 效果被称之为不相交 rollover。
| 1 | 如果图层面板看不到，选择 Window > Layers。点击 Layer 1 将其选为当前层。你所需要做的修改必须是在 Layer 1 上。 |
| 2 | 显示帧面板 (如果帧面板尚未显示则选择 Window > Frames)。
|
| 3 | 点击帧面板底部的 New / Duplicate Frame 按钮。 |
| 4 | 点击帧面板上的 Frame 2。这时除按钮之外所有的东西都会看不到了，因为所有其它的东西都在 Frame 1。而按钮却是所有的帧都共享的。 |
| 接下来，你要将作为 rollover 源图的作品放到 Frame 2 上。这时你可能需要将洋葱皮功能 (onion skinning) 开启来帮助你排列 Frame 2 和 Frame 1上的作品。洋葱皮功能让用户可以一次显示多帧内容，除了当前帧上的内容，其他帧上的内容是比较暗淡的。 | |
| 5 | 点击帧面板上 Frame 1 左边一栏。
Fireworks 就会显示出想裹了一层半透明的洋葱皮似的 Frame 1 的内容。
|
| 为节省时间，我们已经创建好了你将用于 rollover 的作品。 | |
| 6 | 如果图库面板看不到，选择 Window > Library。 |
| 图库面板上保存了按钮和其他用户在整个设计过程中需要重复使用的作品。有关使用图库面板的介绍，参阅 符号和实体。 | |
| 7 | 在图库项目列表上点击 Swap Text，在图库面板上边就会显示出作品预览。
|
| 8 | 从图库面板上的预览区拖拽 Swap Text 项并把它放到欢迎信息文本上边。
|
| 9 | 在帧面板上点击 Frame 1，将其激活。 |
| 10 | 使用点选工具选取欢迎信息文本后边的矩形并选择 Insert > Slice。 |
| Fireworks 会在切割图形上边插入一个淡绿色透明矩形框。
|
|
| 11 | 在对象面板上(如果对象面板看不到则选择 Windows > Object)，取消对 Auto-Name slices 选项的选取，在面板底部的文本框中输入 text_slice。对切割对象命名可以有效地帮助用户在维护和更新网站的时候识别切割图像。
|
| 然后你就要将一个 behavior—预先写好的 JavaScript 代码—赋到 Gifts 按钮上，当鼠标滑过按钮时切割图像进行图像交换。 | |
| 12 | 选取 Gifts 按钮。 |
| 13 | 在 Behaviors 面板上(如果这个面板看不到则选择 Window > Behaviors)，点击加号 (+) 按钮并从弹出菜单中选择 Swap Image。
|
| Swap Image 对话框出现。 | |
| 14 | 确定在对话框左边的切割列表中的 text_slice 已经被选取，点击 OK。
|
| 15 | 点击工具箱中的 Hide Hotspots and Slices 按钮，点击工作取得 Preview 标签，移动鼠标滑过按钮。在鼠标滑过按钮 Gifts 时注意右边的信息的变化。 |
| 在 Preview 标签之下会显示出图形，按钮和 JavaScript behaviors 在浏览器中的表现。 | |
| 16 | 点击 Original 标签，保存图像。 |
|