多语言展示
当前在线:131今日阅读:113今日分享:31

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

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

Dreamweaver cs5

方法/步骤
1

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

2

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

3

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

4

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

5

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

6

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

7

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

8

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

9

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

推荐信息