- 网页设计与网站建设完全实战手册
- 刘贵国
- 965字
- 2021-03-19 18:34:45
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源代码中插入一个空链接＃，该链接上将附加鼠标经过的图像行为，如果将该链接删除，鼠标经过图像将不起作用。