翻转图像就是当鼠标指针经过图片时，图片会变成另外一张。一个翻转图像其实是由两张图片组成的：第一图像（当页面显示时的图像）和翻转图像（当鼠标经过第一图像时显示的图像）。组成图像翻转的两张图片必须有相同的尺寸。如果两张图片的尺寸不同，Dreamweaver CS6会自动将第二张图片尺寸调整成与第一张同样大小。

下面，通过创建一个具体翻转图像的示例，了解创建翻转图像的具体操作，最终的创建效果如图5-5和图5-6所示。

图5-5 翻转图像效果（翻转前）

图5-6 翻转图像效果（翻转后）

在文档窗口中，将光标置于所要插入翻转图像的地方。

执行“插入”|“图像对象”|“鼠标经过图像”命令或单击“插入”/“常用”面板上的下拉箭头图标弹出下拉菜单如图5-7所示，在弹出菜单中单击“鼠标经过图像”，此时会弹出插入翻转图像对话框，如图5-8所示。

(www.daowen.com)

图5-7 插入图像菜单

图5-8 “插入鼠标经过图像”对话框

在“图像名称”栏中输入翻转图像的名称。

在“原始图像”栏中输入初始图像的路径，或者单击“浏览”按钮，从弹出的对话框中浏览选择所需图像文件。

在“鼠标经过图像”栏中输入翻转图像的路径，或者单击“浏览”按钮，从弹出的对话框中浏览选择图像文件。选中“预载鼠标经过图像”前的复选框，这样可以让图片预先加载到浏览器的缓存中，使图片显示速度快一点。

单击“确定”按钮保存文件，完成操作。这样完成了翻转图像的创建，可以按下F12键在浏览器中观察创建的结果。