3.4　圖像效果實例——鼠標替換圖像

在Dreamweaver CS6中可以制作鼠標替換圖像，瀏覽器加載頁面時顯示初始圖像，當鼠標指針移到初始圖像上方時，該圖像即會替換為另一張圖像。

本實例中鼠標替換圖像的制作，主要通過“插入鼠標經過圖像”對話框來完成。通過本實例，可以學習和掌握在Dreamweaver中添加鼠標經過圖像的基本方法。本實例的編輯過程，主要包括以下操作環節。

（1）執行“插入”→“圖像對象”→“鼠標經過圖像”命令，打開“插入鼠標經過圖像”對話框。

（2）在“鼠標經過圖像”對話框中，設置初始圖像和替換圖像的文件地址等。

（3）執行“文件”→“保存”命令保存文件，按“F12”鍵在瀏覽器中預覽網頁效果。

在制作“鼠標經過圖像”之前，先要準備兩張尺寸相同的圖片：一張作為主圖像在首次加載頁面時顯示；另一張作為次圖像在經過鼠標經過時顯示。準備好后就可以開始制作了，具體操作步驟如下。

（1）打開素材中Dw 3\images\Lesson8小節目錄下的“start.html”文件（圖3-20）。

（2）將光標插入到需要插入“鼠標經過圖像”的位置，執行“插入記錄”→“圖像對　　　象”→“鼠標經過圖像”命令，打開“插入鼠標經過圖像”對話框（圖3-21）。

“插入鼠標替換圖像”對話框中各項參數的功能介紹如下。

圖像名稱：鼠標經過圖像的名稱。

原始圖像：使用瀏覽器打開網頁時預載的圖像。

鼠標經過圖像：鼠標移到圖像上方時顯示的圖像。

預載鼠標經過圖像：在打開網頁時，將鼠標經過圖像載入緩存中。

替換文字：當圖像無法顯示時，則顯示設置的文本內容。

按下時，前往的URL：為鼠標經過圖像設置超級鏈接， 當鼠標在圖像上按下后即可打開新網頁。

（3）在“插入鼠標經過圖像”對話框中，單擊“原始圖像”后面的“瀏覽”按鈕，打開“選擇圖像源文件”對話框（圖3-22）。

（4）在“選擇圖像源文件”對話框中，選擇要設置為原始圖像的圖像文件，然后單擊“確定”按鈕（圖3-23）。

（5）回到“插入鼠標經過圖像”對話框中，可以看到在“原始圖像”文本框中已經添加了一個圖像地址（圖3-24）。

（6）單擊“插入鼠標經過圖像”對話框中“鼠標經過圖像”后面的“瀏覽”按鈕，打開“選擇圖像源文件”對話框（圖3-25）。

（7）在打開的“選擇圖像源文件”對話框中，選擇要設置為鼠標經過圖像的圖像文件，然后單擊“確定”按鈕（圖3-26）。

（8）回到“插入鼠標經過圖像”對話框中，可以看到“鼠標經過圖像”文本框中也添加了一個圖像文件的地址（圖3-27）。

（9）在“替換文本”對話框中，輸入文本內容“鼠標經過圖像”，當圖像不能顯示時便會顯示出該段文本內容（圖3-28）。

（10）在“按下時，前往URL”文本框中輸入鏈接地址，然后單擊“確定”按鈕，完成“插入鼠標經過圖像”對話框的設置（圖3-29）。

（11）在文檔中可以看到插入的鼠標經過圖像（圖3-30）。

（12）執行“文件”→“保存”命令保存文檔，然后按下“F12”鍵在瀏覽器中預覽效果（圖3-31）。