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

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

八、为网页增添互动效果

制作简单的互动效果

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

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

点击对象面板上的

,看到如下的对话框:

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

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

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

④ Url:图片的链接网址;

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航