制作图片上的滚动效果

可淘淘

MouseOver和MouseOut效果是网页中比较流行的一种做法，当鼠标移动到某一幅图片上方时，原有的图片会变色或者成为另一张图片。尽管我们根本不用考虑javascript程序代码的编写，我们还是应该对后台发生的事件有一点了解，掌握翻滚效果是如何运作的：当鼠标经过web页面中某一个图形时，它会自动被另外一副预定的图形替换。所以，虽然制作软件有所不同，方法也有区别，但是基本的原理是一致的。不管在哪个软件中制作翻滚效果，有三样东西不可缺少：原始图形、替换图形、控制图形切换的javascript动作。

第一步，使用photoshop制作两幅图片，由于这个特效一般用于菜单的制作，因此使用photoshop制作两幅不同底色的图片。制作的方法很简单，使用“文件/新建”创建两个尺寸相同的文件，使用文字工具输入相同的文字，然后使用油漆桶工具为这两个文件涂上不同的颜色。然后，将这两幅图片保存成名为w1和 w1_2的GIF或JPEG格式的文件。

第二步，打开Dreamweaver，下面的工作要使得上方菜单中的“网络相关”的图片产生鼠标上滚效果。选中网络相关这幅图片，即刚才命名的w1文件，选择window/behavior3打开行为面板。 然后单击面板中的“+”号，从弹出的菜单中选中Swap Image。

第三步，在弹出的窗口中单击Browse按钮，选中刚才制作的w1_2文件，也就是鼠标移动到图片上方时变化后的图片。此外，当鼠标移动到图片上时，由于显示over或out的图片是需要一定的读取时间的, 所以会产生一定的延迟感，真是“大煞风景”。为了防止鼠标上滚后第二幅图片的显示会有所延迟，可以在上面的对话框中选中Preload Images复选框，使得所有图片均预先载入。最后单击“OK”按钮，这样翻滚的效果就制作成功了。