在用Fireworks对图片进行切图时,只要我们设置一下,就能实现动态效果。下面我们就用实例来说明详细的操作过程。 1.打开Fireworks,打开预先准备的文件“Zhou.gif”,点中绘图工具栏中的“Slice Tool”。要在图像上制作用来调用JavaScript的热区,对图片进行切割,切出来的效果如图所示。 3.接着做两个与“hot”热区相同大小的图片,做为切换的图片。然后回到我们刚才编辑的图像,选定button1热区,再选择Windows>Behaviors选项,打开“Behaviors”面板。按下“加号”按钮,在弹出的菜单中选择“Swap Image”,在随后弹出的对话框里的“Swap Image in Slice”选项中选择“Hot”热区,这样做就可以让button1热区调用一个使hot热区产生变化的JavaScript;在“Source of Swap”中选择“Image File”,并在浏览面板中指定刚才制作的两个图像文件中的一个。最后激活“Restor Image onMouseOut”。激活这个功能后,浏览者将鼠标离开调用JavaScript的热区后,发生变化的图像将恢复正常。同样的方法,再让button2热区也调用一个使hot热区产生变化的JavaScript。 4.经过上面步骤以后,“Behaviors”面板将出现一个“OnMouseOver”的事件处理器,这就说明刚才做的热区已经成功调用了JavaScript。我们还可以将“OnMouseOver”事件处理器改变成“OnClick”,也就是将鼠标捕捉响应修改成鼠标点击响应。选择“File>Preview in Browser>Preview in就可以在浏览器中预览刚才的作品了。 制作完成后,利用导出功能将刚才所制作的图像连同HTML一起输出。这样一个简单的动态效果的切图就彻底实现。只要掌握其中的制作原理和方法同样可以应用到复杂的图象效果处理中。 |