6.4 插入鼠标经过图像

在浏览器中查看网页时，当鼠标指针经过图像时，该图像就会变成另外一幅图像；当鼠标移开时，该图像就又变回原来的图像。这种效果在Dreamweaver中可以非常方便地做出来。

鼠标未经过图像时的效果如图6-20所示，当鼠标经过图像时的效果如图6-21所示，具体操作步骤如下：

图6-20 鼠标未经过图像时的效果

图6-21 鼠标经过图像时的效果

01 打开网页文档，将光标置于插入鼠标经过图像的位置，如图6-22所示。

图6-22 打开网页文档

02 执行“插入”|“图像”|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图6-23所示。

图6-23 “插入鼠标经过图像”对话框

★知识要点★

“插入鼠标经过图像”对话框中可以进行如下设置：

●图像名称：可以设置这个滚动图像的名称。

●原始图像：设置滚动图像的原始图像，在其后的文本框中输入此原始图像的路径，或单击“浏览”按钮，打开“原始图像”对话框，在“原始图像”对话框中可选择图像。

●鼠标经过图像：用来设置鼠标经过图像时，原始图像替换成的图像。

●预载鼠标经过图像：选中该复选框，打开网页时就预下载替换图像到本地。当鼠标经过图像时，能迅速地切换到替换图像；如果取消选中该复选框，当鼠标经过该图像时才下载替换图像，替换可能会出现不连贯的现象。

●替换文本：用来设置图像的替换文本，当图像不显示时，显示这个替换文本。

●按下时，前往的URL：用来设置滚动图像上应用的超链接。

03 单击“原始图像”文本框右边的“浏览”按钮，弹出“原始图像：”对话框，在对话框中选择相应的图像images/03.jpg，如图6-24所示，单击“确定”按钮。

图6-24 “原始图像：”对话框

04 单击“鼠标经过图像”文本框右边的“浏览”按钮，弹出“鼠标经过图像：”对话框，在对话框中选择相应的图像images/01.jpg，如图6-25所示。

图6-25 “鼠标经过图像：”对话框

05 单击“确定”按钮，如图6-26所示。

图6-26 添加到对话框

06 单击“确定”按钮，即可插入鼠标经过图像，如图6-27所示。

图6-27 插入鼠标经过图像

07 选中插入的图像，单击鼠标右键，在弹出的快捷菜单中选择“对齐”|“右对齐”命令，如图6-28所示。

图6-28 设置图像对齐方式

08 保存文档，按F12键在浏览器中预览，鼠标未经过图像时的效果参见图6-20所示，鼠标经过图像时的效果参见图6-21所示。

★提示★

在插入鼠标经过图像时，如果不为该图像设置链接，Dreamweaver将在HTML源代码中插入一个空链接＃，该链接上将附加鼠标经过的图像行为，如果将该链接删除，鼠标经过图像将不起作用。

上一章目录下一章