网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > Dreamweaver
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.Dreamweaver使用CSS的注意事项.
.Ultradev实例教程:3.5 编辑数据库.
.Dreamweaver MX实例:图片应用技.
.Dreamweaver层使用八定律.
.Dreamweaver 基础 :DW的"文档"工.
.Dreamweaver MX 打造我们的留言本.
.Ultradev实例教程:2.3 创建Web站.
.下拉菜单全攻略之Dreamweaver篇.
.DreamwaverMX与ASP.NET(五).
.Dreamweaver构建Blog全程实录(3).
.Ultradev实例教程:1.5 ultradev的.
.Dreamweaver 4 简明教程(五、让你.
.修改注册表解决Dreamweaver乱码问.
.Dreamweaver构建Blog全程实录(9).
.Ultradev实例教程:2.4 UltraDev与.
.Dreamweaver教程:弹出窗口.
.Dreamweaver 4 简明教程(七、网页.
.学习Dreamweaver8了解掌握CSS层叠.
.Dreamweaver构建Blog全程实录(4).
.用Dreamweaver MX建设神奇网页图.

Dreamweaver 4 简明教程(八、为网页增添互动效果)

发表日期:2004-1-29


八、为网页增添互动效果

  制作简单的互动效果


  在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?在开篇的时候,提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在,我们就利用Dreamweaver制作这个最简单的互动效果——变换图片。


  准备两张大小相同的图片,一张是鼠标还没有移上的状态,另一张是鼠标移上去后的图片,例如以下两图,左图是一个凸起的按钮,右图是一个凹下的按钮:



  点击对象面板上的 ,看到如下的对话框:



   Image Name:变换图片效果的标记名称,Dreamweaver会自动分配;

   Original Image:指定原始的图片,(例如这里是凸起的图)

   Rollover Image:指定鼠标移上去后的图片(例如这里是凹下的图);

   Url:图片的链接网址;


  例如按照上图的设置完毕后,按下OK,然后可以按F12预览一下效果了。
上一篇:Dreamweaver 4 简明教程(七、网页的排版4) 人气:16309
下一篇:Dreamweaver 4 简明教程(八、为网页增添互动效果2) 人气:16100
浏览全部Dreamweaver 4 简明教程的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐