上一页下一页

创建鼠标经过图像

鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像实际上由两个图像组成:主图像(当首次载入页时显示的图像)和次图像(当鼠标指针移过主图像时显示的图像)。鼠标经过图像中的这两个图像应大小相等;如果这两个图像大小不同,Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。

您不能在 Dreamweaver 的“文档”窗口中看到鼠标经过图像的效果。若要看到鼠标经过图像的效果,请按 F12 键在浏览器中预览该页,然后将鼠标指针滑过该图像。

鼠标经过图像自动设置为响应 onMouseOver 事件。有关设置图像以响应不同事件(例如,鼠标单击)或有关编辑鼠标经过图像以显示不同图像的信息,请参见交换图像

鼠标经过图像的一种较为复杂的形式是导航条。若要创建导航条,请使用“插入”>“交互式图像”>“导航条”命令(请参见插入导航条)。

若要创建鼠标经过图像,请执行以下操作:
  1. 在“文档”窗口中,将插入点放置在要显示鼠标经过图像的位置。
  2. 使用以下方法之一插入鼠标经过图像:
    • 在“插入”栏中,选择“常用”,然后单击“鼠标经过图像”图标。
    • 在“插入”栏中,选择“常用”,然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置。
    • 选择“插入”>“交互式图像”>“鼠标经过图像”。
    • 随即显示“插入鼠标经过图像”对话框。

  3. 在“图像名称”文本框中,键入鼠标经过图像的名称。
  4. 在“原始图像”文本框中,单击“浏览”并选择您要在载入页时显示的图像,或在文本框中输入图像文件的路径。
  5. 在“鼠标经过图像”文本框中,单击“浏览”并选择您要在鼠标指针滑过原始图像时显示的图像,或在文本框中输入图像文件的路径。
  6. 如果您希望图像预先载入浏览器的缓存中,以便用户将鼠标指针滑过图像时不发生延迟,请选择“预先载入图像”选项。
  7. 在“替代文本”中,为使用只显示文本的浏览器的访问者输入描述该图像的文本。(可选)
  8. 在“单击时,转到 URL”文本框中,单击“浏览”并选择文件,或者键入在用户单击鼠标经过图像时要打开的文件的路径。
  9. 备注: 如果您不为该图像设置链接,Dreamweaver 将在 HTML 源代码中插入一个空链接 (#),该链接上将附加鼠标经过图像行为。如果删除该空链接,鼠标经过图像将不再起作用。

  10. 单击“确定”关闭“插入鼠标经过图像”对话框。
  11. 请选择“文件”>“在浏览器中预览”,或按 F12 键。
  12. 在浏览器中,将鼠标指针移过原始图像。
  13. 显示应切换到鼠标经过图像。


  上一页下一页