Skip to main content

在Dreamweaver中创建翻转图像的教程

46.创建文字层 (六月 2025)

46.创建文字层 (六月 2025)
Anonim

翻转图像是当您或您的客户将鼠标滑过其上时更改为其他图像的图像。这些通常用于创建交互式感觉,例如按钮或标签。但您可以创建几乎任何东西的翻转图像。

本教程旨在帮助您在Dreamweaver中创建变换图像。它适用于使用以下版本的Dreamweaver的用户:

  • Dreamweaver MX
  • Dreamweaver MX 2004
  • Dreamweaver 8
  • Dreamweaver CS3
  • Dreamweaver CS4
  • Dreamweaver CS5
  • Dreamweaver CS6

本教程的要求

  • Dreamweaver中上面列出的版本之一。
  • 原始图像确保优化此图像。这将有助于您的网页加载更快。
  • 翻转图像此图像应与原始图像的尺寸相同。并且,与原始图像一样,应进行优化以帮助加载页面加载时间。
  • 一个网页这是您将放置翻转图像的HTML页面。

入门

  1. 启动Dreamweaver
  2. 打开要翻转的网页

插入翻转图像对象

Dreamweaver可以轻松创建翻转图像。

  1. 转到“插入”菜单,然后转到 图像对象 子菜单。
  2. 选择 图像翻转 要么 翻滚图像.

某些旧版本的Dreamweaver会调用图像对象“交互式图像”。

告诉Dreamweaver使用什么图像

Dreamweaver会弹出一个对话框,其中包含您需要填写的字段以创建翻转图像。

图像名称

选择页面唯一的图像名称。它应该是一个单词,但您可以使用数字,下划线(_)和连字符( - )。这将用于识别要更改的图像。

原始图像

这是将在页面上开始的图像的URL或位置。您可以在此字段中使用相对或绝对路径URL。这应该是您的网络服务器上存在的图像,或者您将与页面一起上传的图像。

翻转图像

这是鼠标悬停在图像上时显示的图像。就像原始图像一样,这可以是图像的绝对路径或相对路径,它应该在您上传页面时存在或上传。

预加载翻转图像

默认情况下会选中此选项,因为它有助于更​​快地显示翻转。通过选择预加载翻转图像,Web浏览器会将其存储在缓存中,直到鼠标滑过它。

替代文字

良好的替代文字使您的图像更容易访问。添加任何图像时,应始终使用某种类型的替代文本。

单击时,转到URL

大多数人在看到页面上的图片时会点击图片。所以你应该养成使它们可点击的习惯。此选项允许您指定用户在单击图像时访问的页面或URL。但是,创建翻转不需要此选项。

完成所有字段后,单击 让Dreamweaver创建翻转图像。

Dreamweaver为您编写JavaScript

如果您在代码视图中打开页面,您将看到Dreamweaver在其中插入了一个JavaScript块 您的HTML文档。此块包含鼠标滑过时需要交换图像的3个功能,以及选择该功能时的预加载功能。

函数MM_swapImgRestore()函数MM_findObj(n,d)函数MM_swapImage()函数MM_preloadImages()

Dreamweaver为Rollover添加HTML

如果您选择让Dreamweaver预加载翻转图像,那么您将在文档正文中看到HTML代码以调用预加载脚本,以便您的图像加载更快。

的onload = “MM_preloadImages( 'shasta2.jpg')”

Dreamweaver还会为您的图像添加所有代码并将其链接(如果您包含URL)。翻转部分作为onmouseover和onmouseout属性添加到锚标记中。

的onmouseout = “MM_swapImgRestore()”的onmouseover = “MM_swapImage( 'IMAGE1', '', 'shasta1.jpg',1)”

测试翻转

查看功能齐全的翻转图像,了解Shasta的想法。