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

2018-06-23 18:17:02来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

八、为网页增添互动效果

  制作简单的互动效果


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


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



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



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

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

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

  ④ Url:图片的链接网址;


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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用Dreamweaver MX制作导航下拉菜单

下一篇:Dreamweaver构建Blog全程实录(9)-站点统计