網(wǎng)站設計離不開表格，圖像以及各種網(wǎng)頁按鈕，一個按鈕在制作時的重要性我們的網(wǎng)頁設計師必須要認識到，網(wǎng)頁按鈕有很多種樣式，比如視覺效果、提現(xiàn)樣式，博納網(wǎng)絡今天與各位分享網(wǎng)站設計怎樣制作翻轉按鈕。
在Dreamweaver中，利用“交換圖像”行為可通過改變圖片數(shù)據(jù)源的屬性將原圖片替換為另一幅圖片。如果要建立一個可翻轉的鏈接按鈕，用以鏈接到某個網(wǎng)站，可以選擇該行為。當移動鼠標指針到交換圖像按鈕上時，即可變換按鈕圖片；單擊該按鈕又可以鏈接到指定的網(wǎng)頁上。
【操作步驟】
第1步，打開本站示例中的orig.html文件，另存為effect.html。設計當鼠標經(jīng)過縮略圖時，顯示翻轉圖像。
第2步，將鼠標指針定位到文檔中耍插入鏈接圖片的位置。選擇【插入】【圖像】【圖像】命令，在打開的【選擇圖像源文件】對話框，中選擇要插入的圖片完成后單擊【確定】按鈕。
第3步，選中該圖片，并打開【屬性】面板在【鏈接】文本框中輸入要鏈接的URL地址，并命名圖像，即設置圖像均id屬性值，如圖7-26所示
網(wǎng)站設計翻轉按鈕操作示意圖7-26設置鏈接地址
第4步，選擇【窗口】【行為】命令，打開【行為】面板，并單擊其中的
按鈕，在打開的菜單中選擇【交換圖像】命令，如圖7-27所示。
網(wǎng)站設計翻轉按鈕實操示意圖選擇【交換圖像】命令
第5步，打開【交換圖像】對話框，如圖7-28所示，單擊【瀏覽】按鈕，在【選擇圖像源文件】對話框中選擇要替換的按鈕圖片。
第6步，完成后單擊【確定】按鈕，返回到【交換圖像】對話框。在【交換圖像】對話框中，有兩個復選框可供設置。
1.預先裁八圖像：選中痃復選框后，在瀏覽網(wǎng)頁時系統(tǒng)同時將該圖片載入緩存中，而不是在調用JavaScript時才下載，以防止在圖片切換時延時。
2.鼠標滑開時恢復圖像：選中該復選框后，當鼠標指針移出圖片時，將恢復原來的按鈕圖片。
第7步，單擊【確定】按鈕，返回【行為】面板。此時便可看到所加入的“交換圖像”行為，其默認的觸發(fā)事件為onMouseOver，即當鼠標指針移過圖片時觸發(fā)換圖動作，如圖7-29所示。
提示：在【交換圖像】對話框中，如果選中【鼠標滑開時陵復圖像】復選框，在【行為】面板中將加入個新的行為【恢復交換圖像】，如圖7-29所示。其默認的觸發(fā)事件為onMouseOut，它的意思是當鼠標指針移開時觸發(fā)動作。正是該行為使按鈕在鼠標指針移開時自動恢復原來的樣子。
第8步．設置完成后，按F12鍵，打開瀏覽器預覽。此時如果按上述方法正確設置，則將鼠標指針移到按鈕上時，即可改變按鈕的外觀，如圖730所示。
網(wǎng)站設計翻轉按鈕實操示意圖7-30按鈕換轉效果
在使用【交換圖像】行為必必須注意，由于該行為所改變的只是圖片的信息源性，即SRC屬性，所以要切換的圖片必須與原圖片具有相同的尺寸，以免圖片在切換時變形。深圳網(wǎng)站設計公司關于網(wǎng)頁制作對于翻轉按鈕的操作步驟經(jīng)驗，本文就分享到這里。下期我們會繼續(xù)就按鈕制作經(jīng)驗進行實操分享。博納網(wǎng)絡編輯整理。
