基础教程（十四）：创建轮换图像

　轮换图像（Rollover Image）是指这样一种图像：当鼠标指针掠过一幅图像时，它的显示会变为另一幅图像。轮换图像实际上是由两幅图像组成：初始图像（页面首次装载时显示的图像）和替换图像（当鼠标指针掠过时显示的图像）。用于创建轮换图像的两幅图像的大小必须相同。如果图像的大小不同，Dreamweaver自动调整第二幅图像的大小，使之与第一幅图像匹配。

要进一步理解轮换图像，请用鼠标试试下图：

一、用插入方法创建轮换图像

用插入方法创建轮换图像的步骤如下：

1	将光标置于文档窗口要显示轮换图像的位置。
2	用以下方法之一插入轮换图像：
	选择Window$#@62;Objects（窗口$#@62;对象），打开对象面板，单击Rollover（轮换图像）按钮。
	选择Insert$#@62;Rollover Image（插入$#@62;轮换图像）。
3	在弹出的对话框中输入以下信息：
	单击Original Image（初始图像）右边的Browse（浏览）按钮，选择一幅图像；或在Original Image域中输入初始图像的路径和文件名。
	单击Rollover Image（替换图像）右边的Browse按钮，选择一幅图像；或在Rollover Image域中输入替换图像的路径和文件名。
	要建立一个连接，浏览并选择一个文件；或在“When Clicked,Go To URL”输入域中直接输入URL。
	要使Dreamweaver把图像预载入浏览器缓冲区，选择Preload Rollover Image选项。
4	单击OK。
5	选择File$#@62;Preview in Browser(文件$#@62;在浏览器中预览)，在浏览器中移动鼠标指针，掠过初始图像，预览轮换图像效果。

　二、用附加行为的方法创建轮换图像

　　我们也 可以通过给一幅图像附加行为来创建轮换图像。

　　行为是指事件和动作的组合。事件是触发动作的情景。例如，当用户单击一个按钮时，称为onClick的事件就会发生。或者，当鼠标指针掠过一个对象时，称为onMouseOver的事件会发生。动作是预先写好的一段JavaScript代码，它执行指定的任务，如打开浏览器窗口、播放声音或停止Shockwave动画的播放等等。

　　给某个页面元素附加行为，就是给该元素指定动作和触发它的事件。

　　通过附加行为来创建轮换图像的步骤如下：

1	在文档窗口插入一幅图像，并保持被选择状态。
2	选择Window$#@62;Behaviors或按F8键，打开行为面板。
3	在 Events For弹出菜单上，3.0 and Later Browsers应该已被显示。如果没有显示，选择它。（附注：如果是在中文Windows环境下，单击下箭头无法弹出Events For菜单，这是中、西文软件不兼容的缘故。解决的办法很简单，先用鼠标单击它，然后使用箭头键选择即可。）
4	单击行为面板中的加号（＋）按钮，从弹出的菜单上选择Swap Image（交换图像）。
	Swap Image对话框出现。图像列表中列出了本页面的所有图像。选择一幅图像，作为轮换图像的初始图像。
5	单击Browse按钮，选择一幅图像，作为替换图像，然后单击Select。
	在发生onMouseOver（鼠标掠过）事件期间，该图像替换掉初始图像。
6	接受Preload Images（预载图像）和Restore Images onMouseOut（鼠标移出时恢复图像）的默认设置。
	当载入该页时，预载图像选项把替换图像载入浏览器的缓冲区。因此，当用户首次把鼠标指针掠过初始图像时，替换图像就能很快显示出来，不会有明显的暂停感觉。
	Restore Images onMouseOut选项自动把Swap Image Restore（交换图像恢复）动作附加给此图像的onMouseOut事件。这样，当用户把鼠标指针移离此图像时，它就恢复初始图像。
7	单击OK关闭Swap Image对话框。
	现在，行为面板包括了你刚才给此图像定义的事件和动作。onMouseOver事件显示出来了，对应的动作是Swap Image。在它上面是onMouseOut事件，对应的动作是Swap Image Restore（当你在Swap Image对话框中接受默认选项时，这种行为被定义）。
8	关闭行为面板，按F12键在浏览器中预览。