为图形化链接创建鼠标经过图像

鼠标经过图像是当站点的访问者用鼠标指针指向该图像时发生变化的图像。例如，当访问者指向页上的某个按钮时该按钮可能会变亮。

鼠标经过图像由两个图像组成：当页最初载入浏览器时显示的图像，以及鼠标指针移到原始图像上时显示的图像。

备注： 当创建鼠标经过图像时，确保使用两个具有相同尺寸的图像。

如果主页 (index.htm) 不是当前页，则切换到主页。（如果该页未打开，则在“站点”面板中双击它的图标将其打开。）

在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。例如，在“Global Car Rental”主页上，双击标有“Lorem”的导航条表格单元格并按Backspace 键 (Windows) 或 Delete 键 (Macintosh) 删除该文本，并将插入点保留在该单元格中。

选择“插入”>“交互式图像”>“插入鼠标经过图像”。
这是所描述的功能的图片。

在“插入鼠标经过图像”对话框中，在“图像名称”文本框中为该图像键入一个名称，例如“home-image”。

这样就为该图像指定了一个专用的名称，可以在 HTML 代码中方便地识别该图像。

在“原始图像”文本框中，单击“浏览”；然后浏览到站点 images 文件夹（Assets 文件夹中）中的 btnHome.jpg 文件。确保“相对于”弹出式菜单设置为“文档”；然后单击“确定”或“选择”(Windows)，或者单击“打开”或“选择”(Macintosh)。

“原始图像”文本框指示当页最初在浏览器中显示时显示哪个图像。

在“鼠标经过图像”文本框中，单击“浏览”；然后浏览到站点 images 文件夹中的 btnHome_on.jpg。确保“相对于”弹出式菜单设置为“文档”；然后单击“确定”或“选择”(Windows)，或者单击“打开”或“选择”(Macintosh)。

“鼠标经过图像”文本框指示当鼠标指针指向浏览器中的图像时显示哪个图像。

确保选择了“预载鼠标经过图像”选项，这样当在浏览器中打开该页时就载入鼠标经过图像，保证了当用户将鼠标指针移到原始图像时图像间的快速转换。

在“按下时，前往的 URL：”文本框中，单击“浏览”按钮并浏览到 index.htm。

index.htm 文件就是您正在编辑的文件，因此该步骤使鼠标经过图像链接到您在其上放置鼠标经过图像的页。让链接指向该链接所在的页看上去可能是多余的，但是您还将在其他页上使用同一组导航鼠标经过图像，因此该链接将允许访问者从其他包含此导航条的页返回 index.htm 页。

单击“确定”关闭该对话框。

指定的原始图像显示在文档中。

保存您的文档。

备注： 在 Dreamweaver 文档窗口中用鼠标指针指向鼠标经过图像时它们不会发生变化；鼠标经过图像只在浏览器中起作用。为了确保鼠标经过图像正常工作，您应该在浏览器中预览您的文档。有关预览的信息，请参见在浏览器中预览。

对于“Global Car Rental”站点，在另外两个导航条表格单元格（分别标有“Ipsum”和“Dolor”的两个单元格）中再创建两个鼠标经过图像：一个鼠标经过图像使用 btnCustomerService.jpg 和 btnCustomerService_on.jpg 图像，链接到 customerService.htm；另一个鼠标经过图像使用 btnLocations.jpg 和 btnLocations_on.jpg 图像，链接到 locations.htm.。请注意，您尚未创建 locations.htm 文件；只是在“插入鼠标经过图像”对话框的“单击时，转到 URL”文本框中键入该文件名。