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