所谓的 JavaScript rollovers,就是一些图形,当你在浏览器中将鼠标滑过这些图形或者点击他们的时候,这些图形会改变外观。Rollover 有许多形式,从按钮到图像交换,再到触发图像。
不管你是使用 Fireworks Button Editor,还是使用切割,或者自己书写代码,创建出来的 JavaScript rollover 的工作方式都是一样的。Rollover 就是在鼠标滑过或点击的时候用一幅图像替换另一幅图像。
下列步骤可以大致帮助你了解创建一个 rollover 的常用技巧。详细介绍,参阅 创建按钮。
一般来讲,在 Fireworks 中创建一个 rollover 需要下边几个步骤:
| 1 | 先创建帧。每个不同的情景图形都绘制在一个单独的帧上。例如,按钮就要有两个到四个帧。 |
| 2 | 分别为每一帧创建或导入图形。 |
| 3 | 创建切割定义在 rollover 被触发后发生变化的区域。所有按钮的不同状态都分享同一切割。 |
| 4 | 如果触发区域和响应区域不是同一区域的话,还要创建热区对象来执行触发任务。 |
| 5 | 为 rollover 定义 behaviors。 |
| Behaviors 决定对鼠标事件如何响应。例如,一个 behavior 会在鼠标滑过一个交换图像 rollover 上时指示浏览器用第 6 帧上的图像替换第 5 帧上的图像。 | |
| 6 | 建立链接,指定目标,设置图形切割的命名方法。 |
| 有关建立链接的详细介绍,参见第十三章,"创建热区和图像映射"。 | |
| 7 | 优化图形。 |
| 有关图形优化的详细介绍,参见第十一章,"优化图形"。 | |
| 8 | 导出切割创建图形文件并生成 HTML,那些控制 rollovers 的 JavaScript 代码就包含在 HTML 文件中。 |
| 有关导出切割的详细介绍,参见第十二章,"导出"。 | |
| 9 | 将 rollover 的 HTML 代码放到网页的 HTML 代码中。 |