图片抽换的三种做法

网络与通信

姚恺丰

想必大家在上网时都见过这种效果：网页上的一张图片，当鼠标移上去之后就转眼成了另一张图片，鼠标移开后又恢复了原样，就是这种神奇而又简简单单的图片抽换，做起来的方法还不止一种，下面我依次分类介绍给各位。

1.DW做法

打开DW后，点击insert面板上的rollover images按钮，弹出对话框，具体各项设置如（图1）所示，

图1
图1

最后单击“确定”，即告完成。再预览看看，效果出来了吧。这种做法虽然方便快捷，但缺点也很明显，生成的代码过多，怎么？我可没骗你，不信你可以将工作区切换成代码编写模式，事实立刻摆在你面前，哇！那该怎么办，这对用小猫的上网一族来说太吃亏了。别急，当然有办法，继续看下去。

2.JavaScript做法


name="image1"是指给img标签定义一个name名称为image1，onmouseover="document.image1.src='picture2.gif'"是指鼠标移上去后输出的图片为picture1.gif，相应的，onmouserout="document.image1.src='picture1.gif'"是指鼠标移开后输出的图片为picture2.gif。很显然，这种方法比方法1的代码精简了许多，为广大小猫用户着想，提倡大家在制作网页时还是采用此方法。

3.DHTML做法

除以上的JavaScript做法外，最后讲讲同样很简单的DHTML做法

id="image1"是指定义href标签的id为image1，后面两句代码与JS类似，其中innerHTML是指定义image1所要输出的HTML语句，这次我们就定义了img标签。
OK，三种图片抽换的做法就讲到这里，各位在平时制作时也多想想，多尝试，或许你就会发现更多更好的方法。