如何在Dreamweaver中创建翻转图像

翻转图像是一种图像，当您或您的客户将鼠标滑过该图像时，图像会变为其他图像。 这些通常用于创建交互式感觉，例如按钮或选项卡。 但是，你可以创建翻滚图像几乎任何东西。

本教程旨在帮助您在Dreamweaver中创建翻转图像。 它旨在供使用以下版本的Dreamweaver的人员使用：

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

本教程的要求

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

01之06

开始使用

1. 启动Dreamweaver
2. 打开您希望翻转的网页

02 06

插入翻转图像图像对象

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

1. 转到插入菜单，然后进入“图像对象”子菜单。
2. 选择“图像翻转”或“翻转图像”

一些旧版本的Dreamweaver改为调用图像对象“交互式图像”。

03年06月

告诉Dreamweaver使用什么图像

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

图像名称

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

原始图像

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

翻转图像

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

预加载翻转图像

这个选项默认是选中的，因为它可以帮助翻转更快地出现。 通过选择预加载翻转图像，Web浏览器将其存储在缓存中，直到鼠标滚过它。

替代文字

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

点击时，转到URL

大多数人会在页面上看到图片时点击图片。 所以你应该养成让他们点击的习惯。 此选项允许您指定页面或URL，以便在观看者点击图像时观看。 但是这个选项不需要创建翻转。

完成所有字段后，单击确定使Dreamweaver创建翻转图像。

下一页显示Dreamweaver写入的脚本。

04年6月

Dreamweaver为您写入JavaScript

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

函数MM_swapImgRestore（）
函数MM_findObj（n，d）
函数MM_swapImage（）
函数MM_preloadImages（）

05年06月

Dreamweaver添加翻转的HTML

如果您选择让Dreamweaver预加载翻转图像，则会在文档正文中看到HTML代码，以调用预加载脚本，以便更快地加载图像。

的onload = “MM_preloadImages（ 'shasta2.jpg'）”

Dreamweaver还为您的图像添加了所有代码并将其链接（如果您包含网址）。 翻转部分作为onmouseover和onmouseout属性添加到锚标签。

的onmouseout = “MM_swapImgRestore（）”
的onmouseover = “MM_swapImage（ 'IMAGE1'， ''， 'shasta1.jpg'，1）”

06年06月

测试翻转

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