dw制作鼠标经过时图像放大鼠标离开图像回原形效果

所属分类: 网页制作 / Dreamweaver 阅读数: 1780
收藏 0 赞 0 分享

网页制作图片特效有很多种,其中鼠标经过图片,可以有图片变大或切换图片的效果,在一些网购平台上我们就可能会看到将鼠标放置在一个商品上时,商品的图片可能会变大或变成商品其他角度的图片了,这其实就是两个比较简单的鼠标经过图片的特效,在DreamWeaver中就可以很方便的实现,下面小编就为大家介绍dw制作鼠标经过时图像放大鼠标离开图像回原形效果方法,来看看吧!

素材:

操作步骤:

1、打开DW软件,新建“HTML”,然后打开“布局”属性,我们添加一个apdiv,用来置放我们的图片;

2、在apdiv中插入“1行3列”表格;

3、然后在3列表格中分别插入图像,每张图像大小设置“宽300px,高300px”;图像名称从左到右依次设置为“a、b、c”;

4、我以中间的图像为例,选中中间图像(名称b) ,打开“行为”——“改变属性”;

5、弹出一个窗口,大家按照上面进行设置:

注:宽度大小要设置比原来要大,这样才能显示图像放大效果;

6、将触发行为修改为onmouseover,也就是鼠标放到图片上面的时候,就会将图片的宽度改为600;

7、再次打开“行为——改变属性”,设置和上一步骤相同,但这次要改变高度大小,同样高度数值要改为比之前的大;

8、将触发行为修改为onmouseover,也就是鼠标放到图片上面的时候,就会将图片的高度改为600;

9、还有两个行为要添加,按照上面的方法,目的是当鼠标离开图片的时候,让图片恢复到原来的大小,如图所示:

注:将触发行为修改为onmouseout,也就是鼠标放到图片上面的时候,就会将图片的高度恢复为300;

10、保存,预览;

鼠标经过,图片变大;

鼠标离开,图片恢复正常;

教程结束,以上就是dw制作鼠标经过时图像放大鼠标离开图像回原形效果方法介绍,操作很简单的,大家按照上面步骤进行操作,希望能对大家有所帮助!

注:本篇文章系脚本之家依照真实经历原创,转载请注明出处!

更多精彩内容其他人还在看

Dreamweaver临时文件工作原理介绍

Dreamweaver使用临时文件将一些未经保存的数据传输至其它应用程序中,一般这些临时文件的作用是应用程序的临时工作空间,或者用于自动存储等功能,下面为大家介绍下临时文件是如何工作的,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

如何在Dreamweaver cs6 中设置默认文档格式为html5

怎么设置Dreamweaver cs6 中默认文档格式为html5,很简单,在编辑->首选参数中便可设置,如截图,有需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

DreamWeaver操作技巧大全(16条技能)

DreamWeaver是著名的网站开发工具,本文整理了一些其相关操作技巧,对于大家的学习会有所帮助,从事网页爱好者的朋友可以学习下,希望对大家有所帮助
收藏 0 赞 0 分享

dreamweaver怎么制作网页折叠菜单效果通过层的显示和隐藏来实现

折叠式菜单实际上是通过层的显示和隐藏,来达到这种效果的,Follow Me!先打开DreamWeaver(DreamWeaver对层的支持很好的,也是做网页的必备工具,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

在Dreamweaver制作可拖动表格效果

在Dreamweaver中,给表格增加css定位,表格就变得象“层”一样可拖动
收藏 0 赞 0 分享

Dreamweaver中制作细边的表格的技巧

Dreamweaver中经常需要制作细边的表格,下面给大家介绍一下方法
收藏 0 赞 0 分享

Dreamweaver中设计多彩文字链接的方法

默认的颜色可能大家会觉得不好看。那如何变成多彩的颜色呢。下面给大家介绍一下。
收藏 0 赞 0 分享

Dreamweaver中如何制作漂亮的导航条按钮

想做一个漂亮的导航按钮。不知道代码?下面给朋友们介绍一下
收藏 0 赞 0 分享

在Dreamweaver中实现网页状态栏中活动文字效果的方法

有时候找开网页的时候,看到浏览器的状态栏会有活动的文字,那如何实现这个效果呢。请看下面的介绍
收藏 0 赞 0 分享

把Javascript代码应用到网页中的方法

把Javascript代码放到网页中,做网页的时候经常要用到这个方法。请看下面的介绍
收藏 0 赞 0 分享
查看更多