在网页上经常看到这样的效果，当鼠标移到一张图片上的时候，原来的图片就切换为另一张图片，鼠标移开后，又恢复原来的模样，是怎么做的呢？在开篇的时候，提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在，我们就利用Dreamweaver制作这个最简单的互动效果——变换图片。

　　准备两张大小相同的图片，一张是鼠标还没有移上的状态，另一张是鼠标移上去后的图片，例如以下两图：

　　点击对象面板上的 ，看到如下的对话框：

　　① 图像名称：变换图片效果的标记名称，Dreamweaver会自动分配；

　　② 原始图像：指定原始的图片，（例如这里是小猪的图）

　　③ 鼠标经过图像：指定鼠标移上去后的图片（例如这里是向日葵的图）；

　　④ 替换文本：用于标识鼠标经过图像的文字或符号；（例如这里是“可爱吗？”）

　　⑤ 前往的 URL：图片的链接网址；

　　例如按照上图的设置完毕后，按下OK，然后可以按F12预览一下效果了,如图。

　　制作更复杂的互动效果

　　在Dreamweaver中，更复杂的效果是通过一个叫“行为”的功能实现的，“行为”的从字面上理解是“行为”，我们又称为事件的响应。通过网页元素的变化，如鼠标的移动、点击等“事件” (Events)，触发弹出窗口，关闭页面等“响应”（Actions），就是一个事件的响应。而值得高兴的是，“行为”的制作过程几乎是傻瓜式的。

　　点击“设计”标签，选择“行为”面板（或按Shift+F3），打开行为面板，如下图：

　　在网页加入行为，需要以下三个步骤：

　　1、选取产生行为的元素，例如图片、带链接的文字、层等。如果需要在页面一载入就开始出现效果，可以选择状态栏上的标签。

　　2、按 按钮选择一种响应（不同的元素，对应的响应也有所不同），并在随后的对话框中设置此响应的属性；以下是可以供选择的响应说明：

　　播放声音：播放声音；

　　打开浏览器窗口：打开新浏览窗口；

　　弹出信息：弹出警告窗口；

　　调用JavaScript：呼叫一段JavaScript；

　　改变属性：改变Html标签的CSS样式；

　　恢复交换图像：恢复原来的图片；

　　检查表单：验证表单的正确性；

　　检查插件：检查浏览器是否装有必要的插件；

　　检查浏览器：根据不同的浏览器，进入不同的页面；

　　交换图像：变换图片；

　　控制 Shockwave or Flash：控制Shockwave或Flash动画的播放；

　　设置导航条图像：设定导航栏的图片；

　　设置文本：在特定的地方显示文字；

　　时间轴：控制时间线的播放；

　　跳转菜单：跳页式的菜单及Go按钮；

　　拖动层：使浏览者可拖动层中的元素；

　　显示-隐藏层：显示或隐藏层；

　　显示弹出式菜单：显示弹出的菜单；

　　显示隐藏式菜单：显示隐藏的菜单；

　　预先载入图像：提前读入图片；

　　转到 URL：链接到指定的网址；

　　显示事件：选择浏览器的版本；

　　获取更多行为：下载更多的行为事件。

　　3、 选择事件（Events），决定在什么情况下触发响应。常见的的事件有：

　　onMouseOver：鼠标移到目标上；

　　onMouseUp：按下鼠标再放开左键时；

　　onMouseOut：鼠标移开时；

　　onMouseDown：按下鼠标时（不需要放开左键）；

　　onClink：点击时；

　　onDblClick：双击时；

　　onLoad：载入网页时；

　　onUnload：离开页面时；

　　onResize：当浏览者改变浏览窗口的大小时；

　　onScroll：当浏览者拖动滚动条的时。

　　举例：如何打开一个没有工具栏的浏览窗口

　　在文字或图片的链接中，只要把“目标”设为“_blank”就可是使链接到的网页在一个新窗口中打开。但你是不是见过看到有的网页，开启的新窗口是不含工具栏，状态栏，网址栏的？这样的窗口是怎么做的呢？

　　先将光标选定在一个链接上（可以是图片链接，也可以是文字链接），按行为面板上的 按钮，选择：“打开浏览器窗口”，如下图：

　　接着看到如下对话框：

　　① 要显示的 Url：新窗口中打开的页面；

　　② 窗口宽度、高度：新窗口的宽与高；

　　③ 属性：选择新窗口的属性，至于这六个属性分别代表什么内容，大家可以自行尝试，可以加深印象；

　　④ 窗口名称；如果在多个链接中加入“打开浏览器窗口”的“行为”的时候，窗口名称都设成一样，这样所链接的网页都会在同一个浏览窗口里显示，而不会一直打开新窗口。

　　举例：如何打开一个没有工具栏的浏览窗口

　　设置好后，就可以看到行为面板已经出现该行为了。另外，建议将“事件”改为加括号的事件，如将onClick改为（onClick），这样可以适应更多的浏览器，如下图：

　　这样，我们在浏览状态下点击刚才那张图，就可以看到一个“什么也没有”的浏览窗口：

　　其他的“行为”效果就不多作介绍，大家可以自己试一试。