目录:
- <！ --3 - >
- 要使用JavaScript来定位您的图片（行为是如何工作的），请首先为每个图片指定一个唯一的ID。尽管您可以使用相同或相似的名称，但图像ID与图像文件名或文本标签不同。图像ID不应该有空格或任何特殊字符。 3选择窗口→行为。 “行为”面板打开。您可以拖动页面上其他位置的“行为”面板，然后通过拖动其底部或侧面来展开它。您也可以通过点击任何面板顶部的深灰色条来关闭其他任何打开的面板以腾出更多空间。 <4>选择一张图片。
- 5选择交换图像行为。
- 6在“交换图像”对话框中指定要交换的图像。
- 如果您不选择此选项，则在使用图像交换时可能会发生延迟。 8如果需要，请取消选择“恢复映像OnMouseOut”选项。
- 新行为出现在“行为”面板中。
- 应用操作之后，您可以返回并指定哪个事件将触发该操作。默认情况下，当您使用交换图像操作时，Dreamweaver会应用OnMouseOver事件，但是您可以将该事件更改为任何可用的事件，例如OnClick，这需要用户单击图像来触发交换图像操作。 11应用其他行为。
- 12在浏览器中测试您的工作。
视频: Dreamweaver初階-004_資料夾建立與檔案管理 2024
在使用Dreamweaver的交换图像行为开始创建更复杂的页面设计之前，请查看使用“交换图像”行为，可以替换页面上的任何图像或所有图像。
使用“交换图像”行为时，重要的是使所有图像交换相同的大小（高度和宽度）如果图像大小不一样，除了第一张图像以外的所有图像将被拉伸或压缩，以适应插入到页面中的第一张图像所占用的空间
<！ - 1 - >如果使用交换图像行为和一系列不完全相同高度和宽度的图像，则有以下选项：
裁剪较大的图像以使所有图像的大小相同
通过为每个水平图像组合两个垂直图像，使水平和垂直图像在设计中占据相同的空间，只需创建一个文件即可在诸如Photoshop之类的程序中，将两个垂直图像并排插入同一个文件中，然后对该图像进行尺寸调整，以使该文件与一个水平图像具有相同的尺寸。
<！ - 2 - >创建一个与您的最大图像大小相同的图像文件，将背景设置为中性色，例如黑色或白色，然后将所有其他图像插入到背景中，以便将其全部保存具有相同的文件大小。
按照以下步骤使用交换图像行为：<1> 1用最初想要显示的所有图像创建一个页面设计。
2在属性检查器中为您的图像命名。
要使用JavaScript来定位您的图片（行为是如何工作的），请首先为每个图片指定一个唯一的ID。尽管您可以使用相同或相似的名称，但图像ID与图像文件名或文本标签不同。图像ID不应该有空格或任何特殊字符。 3选择窗口→行为。 “行为”面板打开。您可以拖动页面上其他位置的“行为”面板，然后通过拖动其底部或侧面来展开它。您也可以通过点击任何面板顶部的深灰色条来关闭其他任何打开的面板以腾出更多空间。 <4>选择一张图片。
在页面中选择将用作操作触发器的图像。
5选择交换图像行为。
在工作区中选择触发器图像后，单击“行为”面板中的加号以打开操作的下拉列表，然后选择要应用的操作。
6在“交换图像”对话框中指定要交换的图像。
在图像列表中，选择要替换的图像的ID。单击“浏览”按钮选择替换主图像的图像。如果图像尚未保存在本地站点文件夹中，则Dreamweaver将提供将其复制到您的位置。在“交换图像”对话框的底部，选择“预先载入图像”选项以指示浏览器在加载页面时将所有图像加载到缓存中。
如果您不选择此选项，则在使用图像交换时可能会发生延迟。 8如果需要，请取消选择“恢复映像OnMouseOut”选项。
恢复图像OnMouseOut选项表示当事件完成时（例如，当鼠标移出触发缩略图时），原始图像将被替换。默认情况下，Dreamweaver会为交换图像行为预选此选项。如果您发现每次在另一个缩略图上滚动光标时都会替换原始图像，则可能需要取消选择此选项。 9为行为指定所有设置后，单击确定。
新行为出现在“行为”面板中。
10为行为指定一个事件。
应用操作之后，您可以返回并指定哪个事件将触发该操作。默认情况下，当您使用交换图像操作时，Dreamweaver会应用OnMouseOver事件，但是您可以将该事件更改为任何可用的事件，例如OnClick，这需要用户单击图像来触发交换图像操作。 11应用其他行为。
要将交换图像行为应用于页面上的其他图像，请重复步骤5-10，单击以选择要用作触发器的图像，然后指定应该交换的相应图像。
12在浏览器中测试您的工作。
直到您单击Dreamweaver中工作区左上角的实时视图按钮或在Web浏览器中预览页面，才能看到类似此类行为的效果。
