DW实现鼠标滑过切换图片

作者:阿三 来源:视觉中国 时间:2008-02-03 18:49:00 

当鼠标滑过一个图片时,图片会变成另外一张图片的效果是怎么制作出来的呢?

相对一些不熟悉HTML代码的朋友来说,可以使用网页编辑软件自带的动作来编辑。

  最简单的其实要属使用FrontPage了,它的很多特效是Java Applet的,但象这种鼠标事件效果是Javascript的,实现的很累赘, * 了一个足有14K大小的JS文件。

Dreamweaver中的效果不错,相对FrontPage虽然代码仍很多,但总体简单些。所以我们推荐初学者使用Dreamweaver来实现这个效果。步骤如下:

  1、 插入鼠标没有移上去前显示的图片,打开DW中的行为面板,点击“+”。  

  



  
  2、 在出现的下拉菜单中选择“交换图像”

  



  

  

  3、 选择鼠标移上去后显示的图片,确定。  

  



  

  4、 这时候行为面板中会有事件和动作,直接保存叶面,完成。

  



  不过此方法会产生较长的js代码,所以并不推荐使用。

其实现在要简单实现这个鼠标事件功能用JS是很容易的,几句代码就够了。

推荐使用下面的代码:

  <image src="img1.gif" onmouseover="this.src='img2.gif'"  onmouseout="this.src='img1.gif'"> 

标签:dw,鼠标,图片
0
投稿

猜你喜欢

  • vbscript与javascript如何传递变量(包括服务器端与客户端)

    2008-04-09 13:46:00
  • SQL Server取得网站路径的几种方法及比较

    2008-12-09 14:15:00
  • 如何在Access报表中每隔N行显示一条粗线

    2008-11-16 18:11:00
  • firefox通过XUL实现text-overflow:ellipsis的效果

    2008-07-08 19:12:00
  • Asp中Server.ScriptTimeOut脚本超时属性需要注意的一点

    2008-10-18 14:53:00
  • CSS控制Table表格文字样式

    2008-06-11 18:53:00
  • 解决在Dreamweaver中不支持中文文件名的方法

    2010-09-02 12:35:00
  • 实现页面中按钮刷新的N种方法

    2007-02-03 11:06:00
  • CSS属性与JavaScript 编码方法对照表

    2008-12-01 13:01:00
  • 产品设计与用户体验

    2009-02-02 10:15:00
  • 将字符实体引用转换成 Unicode 字符

    2011-07-01 12:31:51
  • ASP经常用到的函数

    2009-07-06 13:00:00
  • mysql UNIX时间戳与日期的相互转换

    2010-02-10 12:10:00
  • url传递中文的解决方案

    2007-10-09 20:17:00
  • 纯手工打造CSS像素画

    2009-03-09 12:57:00
  • 最令人蛋疼的10种用户体验设计师

    2011-08-05 18:51:07
  • asp日期 时间 星期函数使用方法详解

    2007-09-21 17:38:00
  • 如何隐藏IP地址的最后一位

    2011-04-04 16:38:00
  • 淘宝网获亚洲最佳在线客户体验大奖

    2009-03-31 12:55:00
  • 学习ASP.NET八天入门:第三天

    2007-08-07 13:30:00
  • asp之家 网络编程 m.aspxhome.com