如何在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的想法。