• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >Dreamweaver教程 > dw制作鼠标放上去图片就显示鼠标离开图片就消失

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

作者:hexuemei 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含dw,鼠标,图片等相关知识,hexuemei 希望在学习及工作中可以帮助到您

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

注:本篇文章系微课江湖依照真实经历原创,转载请注明出处!

您可能想查找下面的文章:

  • DW中的建单选按钮不能实现二选一该怎么办?
  • DW CS6怎么新建站点并管理站点?
  • DW怎么设置滚动字幕?
  • DW如何制作一个简单的垂直导航?
  • dw怎么制作asp动态网页之向数据库增加记录?
  • dw如何插入flash动画?dw插入flash动画方法
  • DW在html中插入css样式方法
  • DW怎么做热点链接?dw热点链接制作方法图解
  • DW怎么设置网站的背景图像?
  • 怎么用DW做一个表格?用DW做表格方法图解

相关文章

  • 2017-08-06怎么格式化html代码? Dreamweaver格式化html代码的技巧
  • 2017-08-06在Dreamweaver中插入有颜色的直线(水平线)
  • 2017-08-06Dreamweaver怎么创建简单的html页面并保存?
  • 2017-08-06Dreamweaver在网页中怎么添加图片呢?
  • 2017-08-06Dreamweaver 一句话技巧集萃
  • 2017-08-06Dreamweaver怎么给网页添加音乐?
  • 2017-08-06小技巧:Dreamweaver的应用源格式
  • 2017-08-06Dreamweaver登陆界面怎么显示?
  • 2017-08-06Dreamweaver代码视图字体更改(让dreamweaver代码更漂亮)
  • 2017-08-06操作Dreamweaver的18条诀窍详细介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Dreamweaver设置页面属性后采用HTML格式怎么办?
    • Dreamweaver中实现双背景图片导航菜单的代码
    • 用Dreamweaver制作电子相册的详细方法(图文)
    • 用DreamWeaver模板工具批量制作网页
    • Dreamweaver CS6制作一个新闻网页首页的实例教程
    • Dreamweaver中CSS面板该怎么设置?
    • Dreamweaver怎么给网页添加样式表的关联?
    • dreamweaver的18条操作技巧
    • 在Dreamweaver里面添加音乐播放器背景音乐的方法
    • Dreamweaver下用CSS制作网页的技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有