- 网页设计与网站建设完全实战手册
- 刘贵国
- 965字
- 2021-03-19 18:34:45
6.4 插入鼠标经过图像
在浏览器中查看网页时,当鼠标指针经过图像时,该图像就会变成另外一幅图像;当鼠标移开时,该图像就又变回原来的图像。这种效果在Dreamweaver中可以非常方便地做出来。
鼠标未经过图像时的效果如图6-20所示,当鼠标经过图像时的效果如图6-21所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0220_0001.jpg?sign=1734381647-dlHglwu8QaNoTPWPGorKBXreHEqJ6ETh-0-5151b72471b29faee426f6796cd1e7aa)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00230.jpg?sign=1734381647-J8z3nOy0eh3VklYjAQV524dlMNHLb4G5-0-b2c7ddc102fb38ee02c2a653471cf079)
图6-20 鼠标未经过图像时的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00231.jpg?sign=1734381647-z9ksz93ebHm6tGrbwVDlBuf073Aqo3qy-0-bfe89d1fc48d625341e177c05d9d3593)
图6-21 鼠标经过图像时的效果
01 打开网页文档,将光标置于插入鼠标经过图像的位置,如图6-22所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00232.jpg?sign=1734381647-X6plDrRFqSMe3eh1qtliOgayUwLPi48n-0-fdb4060aa423d2b78fc2e83d76a0ace9)
图6-22 打开网页文档
02 执行“插入”|“图像”|“鼠标经过图像”命令,弹出“插入鼠标经过图像”对话框,如图6-23所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00233.jpg?sign=1734381647-BsqfJmljHnQCOYuZk3KxuKvDKoZqZ7f3-0-86e4a1fb442ac5338dbe07fc02cbb36a)
图6-23 “插入鼠标经过图像”对话框
★知识要点★
“插入鼠标经过图像”对话框中可以进行如下设置:
●图像名称:可以设置这个滚动图像的名称。
●原始图像:设置滚动图像的原始图像,在其后的文本框中输入此原始图像的路径,或单击“浏览”按钮,打开“原始图像”对话框,在“原始图像”对话框中可选择图像。
●鼠标经过图像:用来设置鼠标经过图像时,原始图像替换成的图像。
●预载鼠标经过图像:选中该复选框,打开网页时就预下载替换图像到本地。当鼠标经过图像时,能迅速地切换到替换图像;如果取消选中该复选框,当鼠标经过该图像时才下载替换图像,替换可能会出现不连贯的现象。
●替换文本:用来设置图像的替换文本,当图像不显示时,显示这个替换文本。
●按下时,前往的URL:用来设置滚动图像上应用的超链接。
03 单击“原始图像”文本框右边的“浏览”按钮,弹出“原始图像:”对话框,在对话框中选择相应的图像images/03.jpg,如图6-24所示,单击“确定”按钮。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00234.jpg?sign=1734381647-FYE31G0Rn3wasWFiqBaLpkHcHLAqe4Nj-0-ebdd1bd13af97cb9cdef770c9b4e673a)
图6-24 “原始图像:”对话框
04 单击“鼠标经过图像”文本框右边的“浏览”按钮,弹出“鼠标经过图像:”对话框,在对话框中选择相应的图像images/01.jpg,如图6-25所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00235.jpg?sign=1734381647-57dtuI9q3dNHxedJqQEkl6Awpkxk9ad4-0-a70a5cda7d509b31248b4cade2f42366)
图6-25 “鼠标经过图像:”对话框
05 单击“确定”按钮,如图6-26所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00236.jpg?sign=1734381647-uPO7RdgomMAa9KeQGmoQLG1dAwk2EnPq-0-35558e15599610c7a4007bd4245e1afe)
图6-26 添加到对话框
06 单击“确定”按钮,即可插入鼠标经过图像,如图6-27所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00237.jpg?sign=1734381647-5dsVyRvVdfYgT9WxTvicJpD62harqMzR-0-a5f62f8fcc6f8d9c01f2134eb3a31e1f)
图6-27 插入鼠标经过图像
07 选中插入的图像,单击鼠标右键,在弹出的快捷菜单中选择“对齐”|“右对齐”命令,如图6-28所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00238.jpg?sign=1734381647-Drc1if98y0Vud0lQ3RpvUdMRuscHwXCK-0-6e96b17956057422907b3066148395c1)
图6-28 设置图像对齐方式
08 保存文档,按F12键在浏览器中预览,鼠标未经过图像时的效果参见图6-20所示,鼠标经过图像时的效果参见图6-21所示。
★提示★
在插入鼠标经过图像时,如果不为该图像设置链接,Dreamweaver将在HTML源代码中插入一个空链接#,该链接上将附加鼠标经过的图像行为,如果将该链接删除,鼠标经过图像将不起作用。