![Dreamweaver CS6网页设计与制作教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/476/29974476/b_29974476.jpg)
3.4 图像效果实例——鼠标替换图像
在Dreamweaver CS6中可以制作鼠标替换图像,浏览器加载页面时显示初始图像,当鼠标指针移到初始图像上方时,该图像即会替换为另一张图像。
本实例中鼠标替换图像的制作,主要通过“插入鼠标经过图像”对话框来完成。通过本实例,可以学习和掌握在Dreamweaver中添加鼠标经过图像的基本方法。本实例的编辑过程,主要包括以下操作环节。
(1)执行“插入”→“图像对象”→“鼠标经过图像”命令,打开“插入鼠标经过图像”对话框。
(2)在“鼠标经过图像”对话框中,设置初始图像和替换图像的文件地址等。
(3)执行“文件”→“保存”命令保存文件,按“F12”键在浏览器中预览网页效果。
在制作“鼠标经过图像”之前,先要准备两张尺寸相同的图片:一张作为主图像在首次加载页面时显示;另一张作为次图像在经过鼠标经过时显示。准备好后就可以开始制作了,具体操作步骤如下。
(1)打开素材中Dw 3\images\Lesson8小节目录下的“start.html”文件(图3-20)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file88.png?sign=1739581722-YWmNYLJUKcCsVyTVE21FjwyVwPeOE9Gu-0-6dfc1970aa185eea74b590085b9e9927)
图 3-20
(2)将光标插入到需要插入“鼠标经过图像”的位置,执行“插入记录”→“图像对 象”→“鼠标经过图像”命令,打开“插入鼠标经过图像”对话框(图3-21)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file89.png?sign=1739581722-aBkUL4dq3SznguKTJjB1w5PpFNzAFmlD-0-11bff7ef4c24af43ecde8762073f8776)
图 3-21
“插入鼠标替换图像”对话框中各项参数的功能介绍如下。
图像名称:鼠标经过图像的名称。
原始图像:使用浏览器打开网页时预载的图像。
鼠标经过图像:鼠标移到图像上方时显示的图像。
预载鼠标经过图像:在打开网页时,将鼠标经过图像载入缓存中。
替换文字:当图像无法显示时,则显示设置的文本内容。
按下时,前往的URL:为鼠标经过图像设置超级链接, 当鼠标在图像上按下后即可打开新网页。
(3)在“插入鼠标经过图像”对话框中,单击“原始图像”后面的“浏览”按钮,打开“选择图像源文件”对话框(图3-22)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file90.png?sign=1739581722-MeURKGFTkZuK1z7xkI3Yg22l8SOsRv2a-0-bf1c4c70449b7ee214355402106c0914)
图 3-22
(4)在“选择图像源文件”对话框中,选择要设置为原始图像的图像文件,然后单击“确定”按钮(图3-23)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file91.png?sign=1739581722-jJARiYFoRZqIDm70RSqTvXai9RGpg5hk-0-b9180f00a3a39b1717aa6bfb34a41a29)
图 3-23
(5)回到“插入鼠标经过图像”对话框中,可以看到在“原始图像”文本框中已经添加了一个图像地址(图3-24)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file92.png?sign=1739581722-V7VWpjoNFF2bvtbcMFqL9bveWOmWa3pS-0-bceb8eefb3cbdd2bd111828e0e8772ba)
图 3-24
(6)单击“插入鼠标经过图像”对话框中“鼠标经过图像”后面的“浏览”按钮,打开“选择图像源文件”对话框(图3-25)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file93.png?sign=1739581722-dM1pHbrsSP98AsloJxTakkYWf0PAEVmg-0-bd84669210c81ac90838ce572a664906)
图 3-25
(7)在打开的“选择图像源文件”对话框中,选择要设置为鼠标经过图像的图像文件,然后单击“确定”按钮(图3-26)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file94.png?sign=1739581722-GOQUVTeZK6AFivPr1GCC6IeV4KSEDVxB-0-1f16df264daede3846c84ebe7eb1d22d)
图 3-26
(8)回到“插入鼠标经过图像”对话框中,可以看到“鼠标经过图像”文本框中也添加了一个图像文件的地址(图3-27)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file95.png?sign=1739581722-epvRcwAzAlMGcepIzB5aN5Bb8w9klEud-0-9f70fc2d5246fb99bf952fdbd649e9e7)
图 3-27
(9)在“替换文本”对话框中,输入文本内容“鼠标经过图像”,当图像不能显示时便会显示出该段文本内容(图3-28)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file96.png?sign=1739581722-lQwqElqVvo2IpReoocPelYJ2D9UEe1fz-0-79ec338de10e091dc53b0bef988f460c)
图 3-28
(10)在“按下时,前往URL”文本框中输入链接地址,然后单击“确定”按钮,完成“插入鼠标经过图像”对话框的设置(图3-29)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file97.png?sign=1739581722-l87YAkWro8KFZIbBb23jQD4eRk97QyND-0-c6159e74eeb5b1199a5ec10de9d3c308)
图 3-29
(11)在文档中可以看到插入的鼠标经过图像(图3-30)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file98.png?sign=1739581722-ayQzwZ5Pu8gutGsCDD6qAhzuafCKMF2y-0-b255e28b7447ee413bf86d97399961f5)
图 3-30
(12)执行“文件”→“保存”命令保存文档,然后按下“F12”键在浏览器中预览效果(图3-31)。
![](https://epubservercos.yuewen.com/F0EC78/16499759404610506/epubprivate/OEBPS/Images/file99.png?sign=1739581722-7UJwDNrOZiOJTQ4pXQGfIYE9NDPmAeiz-0-c467d7d6b334644cfaab601210ae8249)
图 3-31