3.4　圖像效果實例——鼠標(biāo)替換圖像

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

本實例中鼠標(biāo)替換圖像的制作，主要通過“插入鼠標(biāo)經(jīng)過圖像”對話框來完成。通過本實例，可以學(xué)習(xí)和掌握在Dreamweaver中添加鼠標(biāo)經(jīng)過圖像的基本方法。本實例的編輯過程，主要包括以下操作環(huán)節(jié)。

（1）執(zhí)行“插入”→“圖像對象”→“鼠標(biāo)經(jīng)過圖像”命令，打開“插入鼠標(biāo)經(jīng)過圖像”對話框。

（2）在“鼠標(biāo)經(jīng)過圖像”對話框中，設(shè)置初始圖像和替換圖像的文件地址等。

（3）執(zhí)行“文件”→“保存”命令保存文件，按“F12”鍵在瀏覽器中預(yù)覽網(wǎng)頁效果。

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

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

（2）將光標(biāo)插入到需要插入“鼠標(biāo)經(jīng)過圖像”的位置，執(zhí)行“插入記錄”→“圖像對　　　象”→“鼠標(biāo)經(jīng)過圖像”命令，打開“插入鼠標(biāo)經(jīng)過圖像”對話框（圖3-21）。

“插入鼠標(biāo)替換圖像”對話框中各項參數(shù)的功能介紹如下。

圖像名稱：鼠標(biāo)經(jīng)過圖像的名稱。

原始圖像：使用瀏覽器打開網(wǎng)頁時預(yù)載的圖像。

鼠標(biāo)經(jīng)過圖像：鼠標(biāo)移到圖像上方時顯示的圖像。

預(yù)載鼠標(biāo)經(jīng)過圖像：在打開網(wǎng)頁時，將鼠標(biāo)經(jīng)過圖像載入緩存中。

替換文字：當(dāng)圖像無法顯示時，則顯示設(shè)置的文本內(nèi)容。

按下時，前往的URL：為鼠標(biāo)經(jīng)過圖像設(shè)置超級鏈接， 當(dāng)鼠標(biāo)在圖像上按下后即可打開新網(wǎng)頁。

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

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

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

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

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

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

（9）在“替換文本”對話框中，輸入文本內(nèi)容“鼠標(biāo)經(jīng)過圖像”，當(dāng)圖像不能顯示時便會顯示出該段文本內(nèi)容（圖3-28）。

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

（11）在文檔中可以看到插入的鼠標(biāo)經(jīng)過圖像（圖3-30）。

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