dw制作鼠标放上去图片就显示鼠标离开图片就消失

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

今天小编就为大家介绍dw制作鼠标放上去图片就显示鼠标离开图片就消失的效果,操作方法很简单的,不会的朋友可以参考本文哦!

操作步骤:

1、新建“HTML文档”,在“布局”里找到“绘制层”,绘制一个方形层,填充颜色,并在里面输入文字“夏”,字体和颜色,大家自由设置;

2、用“绘制层”再次绘制一个层,层编号设置为“”,宽:300px;高:200px;设置如图所示:

3、在“夏”层里插入一张图片,大小和“夏”层一样大,宽和高分成设置为300px、200px;

4、点击“窗口”—“行为”,出现“行为”窗口;

5、选中“”层,在“”窗口下,打开“”前面的眼睛;然后选中文字“”,在“行为”窗口下,点击,选择“显示—隐藏层”;

6、这时弹出“显示—隐藏层”窗口,选中层“夏”,点击“显示”,然后确定即可;

7、在“行为”窗口中,就会出现“显示—隐藏层”信息,在前面的下拉菜单中选择“onMouseover  ”。

补充:onmouseover 事件会在鼠标指针移动到指定的对象上时发生。

8、再次选中“”层,在“”窗口下,选择“”前面的这个图标,它的意思就是关闭图片,这时你会看到,“”层以及里面的图片都没有了;

9、选中文字“”,在“行为”窗口下,点击,选择“显示—隐藏层”;这时会弹出“显示—隐藏层”窗口,选中层“夏”,点击“隐藏”,然后确定即可;

10、在“行为”窗口中,再次出现“显示—隐藏层”信息,在前面的下拉菜单中选择“onMouseout  ”。

补充:onmouseout 事件会在鼠标指针移出指定的对象时发生;

11、保存,预览;

图1:鼠标放上去,图片显示;

图1

图2:鼠标离开,图片消失

图2

以上就是dw制作鼠标放上去图片就显示鼠标离开图标就消失方法介绍,操作步骤并不是很难,但需要大家仔细一点,尤其在设置行为时要注意图片的显示和隐藏,好了,有兴趣的朋友可以参考本文哦!

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

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

dreamweaver里不用的站点怎么删除?

dreamweaver里不用的站点怎么删除?dreamweaver建立了很多站点,有些仅仅是为了测试用的,测试完了就没用了,该怎么删除呢?下面分享dreamweaver删除站点的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver中的表格怎么排版?

Dreamweaver中的表格怎么排版?在Dreamweaver中插入了表格,但是感觉有点影响美观,想给表格美化一下排排版,该怎么办呢?下面分享Dreamweaver表格排版的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

教你把图片添加到Dreamweaver工程中

1、打开Dreamweaver软件。如果你电脑里没有Dreamweaver软件的话 请点击:Dreamweaver v8.0 简体中文版(附注册机+8.02补丁):http://www.jb51.net/softs/243.html 2、点击HTML。 3、创建一个新
收藏 0 赞 0 分享

Dreamweaver制作网页打开特效教程

想要给你的网站添加一些活力吗?你可以在打开网页的特效上下一点功夫,今天就教大家一招,使你的网页打开就像是看幻灯片一样,有动画的效果。
收藏 0 赞 0 分享

adobe dreamweaver中去除超链接的下划线

划线就是不符合国人的审美观念,看着就别扭,现在就来看看我们如何将其去掉吧,其实很简单的
收藏 0 赞 0 分享

怎么用Dreamweaver查找或替换的技巧

在开发建设网站的过程中,也许我们会遇到这样的情况,当我们的网站已经进行了相当一部分,却发现还需要对某些细节进行修改
收藏 0 赞 0 分享

Dreamweaver怎么清理冗余的网页代码

word来制作网页会出现很多冗余代码。我们都知道程序员应当尽量用简洁的代码实现复杂的功能,接下来我们看看dw怎样帮助我们减少冗余代码
收藏 0 赞 0 分享

Dreamweaver技巧之在网页中给视频播放窗口预设图像

我们在网页中插入视频时,有没有发现,当视频未播放之前播放窗口黑乎乎的甚是难看,那么能否在视频未播放之前先预设一些图像呢?下面给网友们介绍两种增加预设图片的方法
收藏 0 赞 0 分享

Dreamweaver小技巧之应用CSS样式表

Dreamweaver教程的两个小技巧下面教大家一下,去除超级链接的下划线以及在超级链接上实现鼠标悬停变色与创建可反复使用的外部CSS样式表
收藏 0 赞 0 分享

dreamweaver的18条操作技巧

dreamweaver的操作技巧是做网站的朋友都需要掌握技能,下面给大家整理了18条,分享给大家
收藏 0 赞 0 分享
查看更多