提示：Dreamweaver 中的动态技术，大多采用的都是 Javascript 脚本语言，这种语言常常要求指明动作主体即对象，所以，给要产生动作的图片或其他元素命名以便调用是非常必要的。一般情况下，这种命名会由电脑自动完成，如图片，分别命名为 Image 1 、Image 2，等等，在进行对象调用时，这些名字就是最重要的指示！

　　大家首先查看一下各个图片在编辑器属性面板中的名字，其中，白色图片名字为 blank ，phone.jpg 图片名字为 Image 1 ，skill.jpg 图片名字为 Image 2，tea.jpg 图片名字为 image 3 ，如图十：

图十

提示：图片本身就已经有名字了（如 tea.jpg 的名字为 tea.jpg），为何还需要在编辑过程中另起名字？区别在于，tea.jpg 只是该图片文件本身的文件名，而不是动态语句中的对象名称，要在事件过程中调用对象，就得指明对象名，而不是该文件名！

好了，现在一切都准备齐备，我们最后来设置三个图标的行为。

选中 phone.jpg 图片，然后点按 Window/Behavior 命令，打开行为窗口，如图十一：

图十一

点击左上角的" "号，在弹出的菜单中选择 Swap Image ，如图十二：

图十二

然后弹出的设置窗口如图十三：

图十三

Images：图片列表框，其中罗列了所有网页中的图片，如 blank 、Image1 等等，对了，那两个 Unnamed ＜img＞ 指的是 School 与 Computer.jpg 图片，由于它们没有特殊效果，所以没有给它们起名。

要变换哪幅图，只需点选相应的图片就行了。

提示：在一对一的翻滚图中用到的插入命令，只能决定选中图本身的替换图，而不能决定其他图片的替换图；用行为命令却可以向其他图片发出命令进行替换。如鼠标移上 phone.jpg 图片，不但告诉该图片用 phone-2.jpg 图片进行替换，还用 hint-phone 替换 "blank" 图片。而这，也就形成了一对多的关系。

Set Source to：设置替换图片，可以通过点按右边的 "Browse"按钮在文件夹中找到替换图片，也可以直接输入图片的地址。

Preload Images：预取图片，其原理在前面我们已经讲过，建议勾选。

Restore Images onMouseOut：当鼠标移出图片时恢复为一般状态下的原图像，建议勾选。

　　我们知道了原理，就可以非常轻易地对 phone.jpg 进行设置了。先在 Images 中选择 image "Image1"（确定 Image1 图片将发生替换），在 Set Source to 中找到 phone-2.jpg ；现在不要按 OK ，我们马上进行信息显示图片的行为设置：在 Images 中选择 Image "blank"（确定 Image1 图片发生替换的同时，blank 图片也发生替换），在 Set Source to 中找到 hint-phone.gif 文件，最后点按 OK ，这样，我们就完成了第一个图标的一对多翻滚图设置。

　　以此类推，为其他两个图标进行相应的设置就成功了。

四．总结：

　　翻滚图确实是非常简单的一项动态技术，但它的最终效果却具有如此令人着迷的魅力，以致于从简单的一对一翻滚，到一对多的翻滚替换，在互联网上都得到了大量的应用，而这，也正是我们将它列为第一项动态网页技术进行讲解的最主要原因！