当前位置：早雪网 → 网络学院 → 编程文档 → ASP → Dreamweaver 4 简明教程(八、为网页增添互动效果)

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

减小字体

增大字体作者：佚名来源：本站原创发布时间：2005-6-24 4:40:49

八、为网页增添互动效果

　　制作简单的互动效果

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

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

　　点击对象面板上的，看到如下的对话框：

　　① Image Name：变换图片效果的标记名称，Dreamweaver会自动分配；

　　② Original Image：指定原始的图片，（例如这里是凸起的图）

　　③ Rollover Image：指定鼠标移上去后的图片（例如这里是凹下的图）；

　　④ Url：图片的链接网址；

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

[数据载入中...] [返回上一页] [打印]

·Dreamweaver你未必了解的5个小技巧

·做一个DreamWeaver风格的程序

·Dreamweaver3 图层应用技巧（三）

·Dreamweaver行为全接触(5)

·[图文]Dreamweaver MX Ultradev探索(2)

·Dreamwaver MX与ASP.NET(六)

·Dreamweaver 4.0 新增功能全接触

·Dreamweaver 4 简明教程(七、网页的排版4)

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

·Dreamweaver MX 2004设计留言本实战

·Dreamweaver3 图层应用技巧（一）