3.4　图像效果实例——鼠标替换图像

在Dreamweaver CS6中可以制作鼠标替换图像，浏览器加载页面时显示初始图像，当鼠标指针移到初始图像上方时，该图像即会替换为另一张图像。

本实例中鼠标替换图像的制作，主要通过“插入鼠标经过图像”对话框来完成。通过本实例，可以学习和掌握在Dreamweaver中添加鼠标经过图像的基本方法。本实例的编辑过程，主要包括以下操作环节。

（1）执行“插入”→“图像对象”→“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。

（2）在“鼠标经过图像”对话框中，设置初始图像和替换图像的文件地址等。

（3）执行“文件”→“保存”命令保存文件，按“F12”键在浏览器中预览网页效果。

在制作“鼠标经过图像”之前，先要准备两张尺寸相同的图片：一张作为主图像在首次加载页面时显示；另一张作为次图像在经过鼠标经过时显示。准备好后就可以开始制作了，具体操作步骤如下。

（1）打开素材中Dw 3\images\Lesson8小节目录下的“start.html”文件（图3-20）。

（2）将光标插入到需要插入“鼠标经过图像”的位置，执行“插入记录”→“图像对　　　象”→“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框（图3-21）。

“插入鼠标替换图像”对话框中各项参数的功能介绍如下。

图像名称：鼠标经过图像的名称。

原始图像：使用浏览器打开网页时预载的图像。

鼠标经过图像：鼠标移到图像上方时显示的图像。

预载鼠标经过图像：在打开网页时，将鼠标经过图像载入缓存中。

替换文字：当图像无法显示时，则显示设置的文本内容。

按下时，前往的URL：为鼠标经过图像设置超级链接， 当鼠标在图像上按下后即可打开新网页。

（3）在“插入鼠标经过图像”对话框中，单击“原始图像”后面的“浏览”按钮，打开“选择图像源文件”对话框（图3-22）。

（4）在“选择图像源文件”对话框中，选择要设置为原始图像的图像文件，然后单击“确定”按钮（图3-23）。

（5）回到“插入鼠标经过图像”对话框中，可以看到在“原始图像”文本框中已经添加了一个图像地址（图3-24）。

（6）单击“插入鼠标经过图像”对话框中“鼠标经过图像”后面的“浏览”按钮，打开“选择图像源文件”对话框（图3-25）。

（7）在打开的“选择图像源文件”对话框中，选择要设置为鼠标经过图像的图像文件，然后单击“确定”按钮（图3-26）。

（8）回到“插入鼠标经过图像”对话框中，可以看到“鼠标经过图像”文本框中也添加了一个图像文件的地址（图3-27）。

（9）在“替换文本”对话框中，输入文本内容“鼠标经过图像”，当图像不能显示时便会显示出该段文本内容（图3-28）。

（10）在“按下时，前往URL”文本框中输入链接地址，然后单击“确定”按钮，完成“插入鼠标经过图像”对话框的设置（图3-29）。

（11）在文档中可以看到插入的鼠标经过图像（图3-30）。

（12）执行“文件”→“保存”命令保存文档，然后按下“F12”键在浏览器中预览效果（图3-31）。