- 网页设计与网站建设全攻略
- 何立
- 995字
- 2025-02-21 21:00:23
4.2 鼠标经过图像
在浏览器中查看网页时，当鼠标指针经过图像时，该图像就会变成另外一幅图像；当鼠标移开时，该图像又会变回原来的图像。这种效果在Dreamweaver中可以非常简便地做出来。
鼠标未经过图像时的效果如图4-6所示，当鼠标经过图像时的效果如图4-7所示，具体操作步骤如下。
图4-6 鼠标未经过图像时的效果
图4-7 鼠标经过图像时的效果
原始文件：原始文件/04/4.2/index.htm 最终文件：最终文件/04/4.2/index1.htm
步骤01 打开网页文档，如图4-8所示。
图4-8 打开网页文档
步骤02 将光标置于插入鼠标经过图像的位置，执行“插入”|“图像”|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图4-9所示。
图4-9 “插入鼠标经过图像”对话框
★知识要点★
“插入鼠标经过图像”对话框中可以进行如下设置。
• 图像名称：设置这个滚动图像的名称。
• 原始图像：滚动图像的原始图像，在其后的文本框中输入此原始图像的路径，或单击“浏览”按钮，打开“原始图像”对话框，在“原始图像”对话框中可选择图像。
• 鼠标经过图像：用来设置鼠标经过图像时，原始图像替换成的图像。
• 预载鼠标经过图像：选中该复选框，网页打开就预下载替换图像到本地。当鼠标经过图像时，能迅速地切换到替换图像；如果取消该选项，当鼠标经过该图像时才下载替换图像，替换可能会出现不连贯的现象。
• 替换文本：用来设置图像的替换文本，当图像不显示时，显示这个替换文本。
• 按下时，前往的URL：用来设置滚动图像上应用的超链接。
步骤03 单击“原始图像”文本框右边的“浏览”按钮，在弹出的“原始图像：”对话框中选择相应的图像tu1.jpg，如图4-10所示，单击“确定”按钮，添加到对话框。
图4-10 “原始图像：”对话框
步骤04 单击“鼠标经过图像”文本框右边的“浏览”按钮，在弹出的“鼠标经过图像：”对话框中选择相应的图像tu2.jpg，如图4-11所示。
图4-11 “鼠标经过图像：”对话框
步骤05 单击“确定”按钮，添加到对话框，如图4-12所示。
图4-12 添加到对话框
步骤06 单击“确定”按钮，插入鼠标经过图像，如图4-13所示。
图4-13 插入鼠标经过图像
★提示★
在插入鼠标经过图像时，如果不为该图像设置链接，Dreamweaver将在HTML源代码中插入一个空链接＃，该链接上将附加鼠标经过的图像行为。如果删除该链接，鼠标经过图像将不起作用。
步骤07 选中插入的鼠标经过图像，单击鼠标右键，在弹出的快捷菜单中选择“对齐”|“右对齐”选项，如图4-14所示。
图4-14 设置对齐方式
步骤08 保存文档，按F12键在浏览器中预览，鼠标未经过图像时的效果如图4-6所示，鼠标经过图像时的效果图4-7所示。