设为首页  
联系我们  
加入收藏  
IT动态 网页制作 操作系统 图形图象 冲浪宝典 网络安全 软件教学 认证考试 互联网 数据通信 视频通信 网络编程
您的位置: 首页 >> >> 网页制作 >> Dreamweaver教程 >> Dreamweaver 4 简明教程(八、为网页增添互动效果)
精品推荐
Dreamweaver教程点击TOP10
·在Dreamweaver中插入背景音乐的几种方法
·用Dreamweaver8在网页中插入Flash视频
·Dreamweaver MX实例:图片应用技巧
·Dreamweaver 4 简明教程(八、为网页增添互动效果2)
·如何用Dreamweaver批量做web网页
·Dreamweaver构建Blog全程实录(10):事件日历
·Dreamweaver中实现flash的透明背景
·利用Dreamweaver8掌握网页代码基本格式
·Dreamweaver的行为体验
·ASP.NET与DreamweaverMx结合
网页制作点击TOP10
·图片左右循环连续滚动代码,解决marquee的留白问题
·用FrontPage2003轻松制作ASP动态网页
·网页中添加调用qq或者msn聊天窗口与客服进行互动
·用FrontPage 2003发布您的网站
·一段非常简单的让图片自动切换js代码
·网页中插入视频播放代码全集
·JavaScript自定义模式对话框
·获得网页控件方法大全
·在Dreamweaver中插入背景音乐的几种方法
·用Dreamweaver8在网页中插入Flash视频
精选专题

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

作者: 来源:http://www.vipcn.com 时间:2007-3-25 20:59:19

八、为网页增添互动效果

  制作简单的互动效果


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


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



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



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

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

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

   Url:图片的链接网址;


  例如按照上图的设置完毕后,按下OK,然后可以按F12预览一下效果了。

Dreamweaver 4 简明教程(八、为网页增添互动效果) 相关文章:
Dreamweaver 4 简明教程(八、为网页增添互动效果) 相关软件: