网页中图像过渡效果-图像交换

在制作网页的时候经常会用到图像的过渡效果，比方说图像的交换，那么如何不写代码就可以实现图像的交换呢？今天在此本人就根据自己的制作过程跟大家交流一下，同时分享制作步骤和截图，希望对你有所帮助。

工具/原料

• Dreamweaver cs5

方法/步骤

1. 1

   启动dreamweaver cs5，执行文件-新建命令，在弹出的新建文档对话框中，选择页面类型为html，点击创建按钮，进入主界面。

   
2. 2

   执行插入-图像命令，在弹出选择图像源文件对话框中，找到需要插入图像的位置，点击确定，图片就导入到页面中了。

   
3. 3

   执行窗口-行为命令或者按shift+f4组合键调出行为窗口，在行为面板中点击添加行为按钮，接着弹出下拉菜单。

   
4. 4

   在下拉菜单中选择交换图像选项，弹出交换图像对话框，在该对话框中点击浏览按钮弹出选择图像源文件对话框，找到需要的图像点击确定按钮。

   
5. 5

   返回到交换图像对话框，在该对话框中勾选预先载入图像，这样可以解决下载延迟的问题，这一点尤其重要。

   
6. 6

   点击确定按钮，这个时候在行为面板中你会看到刚才添加的交换图像行为。

   
7. 7

   按f12键接着会弹出“是否将改动保存到”提醒信息，直接点击是，这是会在浏览器中查看到效果。

   
8. 8

   在浏览器中我们会看到第一副图像，当鼠标经过的时候图像立即会变成第二幅图像。

   
9. 9

   执行文件-另存为命令，在弹出另存为对话框中输入名称为“交换图像”，然后找到一个合适的位置进行保存即可。