製作原理
交換影像的製作原理是應用在Dreamweaver中的行為面板上的翻轉影像(Swap image)這一個工具。將它設定成為當產生滑鼠懸停在某一個按鈕圖片的動作的時候,讓按鈕本身實現一個圖像的交換(交換成為黃色文字的圖片),與此同時設計指針圖像的交換(交換成為指針指向當前按鈕的指針圖片),以實現上述效果的實現。
^-^:其實網頁上的一些東西看起來似乎很神秘,可究其根源它也只不過是幾張圖片或幾個圖層的簡單變化而已。
製作材料
這裡示範的是7張按鈕圖片的翻轉,所以,我們需要14張按鈕圖片和7張指針圖片共21張圖片的製作來實現所示效果。其中7張前台按鈕圖片分別命名為B1-1~B1-7,7張後台按鈕圖片分別命名為B2-1~B2-7,其中7張指針圖片分別命名為Z1~Z7,它們的指針分別指向第一到第七個按鈕。您可以用Fireworks等圖片製作軟體來製作按鈕圖片。
製作方法
1、建立網頁文件。
2.插入一個7乘2的表格,並且把左面的一列表格合併,用來插入指針圖片。而右面的七個表格則是用來插入按鈕圖片。
3.在左面的表格中插入第一張指針圖片Z1,在右面的7行單元格中分別插入藍色的前台按鈕B1-1~B1-7(效果如圖2所示)。
4、點選“視窗(Windows)→行為”,調出行為面板。
5.選取第一個要設定行為的圖片,這裡是寫有「指導思想」的按鈕圖片,即圖片B1-1。
6.點選加號按鈕,在彈出式選單下選擇交換影像(Swap image),彈出交換影像對話框。我們的主要部分的設定將在這個對話框中進行。
7.點擊對話框當中的瀏覽按鈕,然後選擇這張按鈕圖片將要翻轉成的目的圖片,在本例中是帶有黃色文字的按鈕圖片,即圖片B2-1。然後點選確定。
8.重複第6步的操作,在圖像的文字方塊中選中指針圖片Z1,然後,再次點擊瀏覽按鈕,把它翻轉成第1個指針文件,即Z1。點選確定。完成上述操作後,行為面板上的顯示結果如圖3所示。
9.選取第2張按鈕圖片B1-2,依照上面的方法將它本身翻轉成按鈕B2-2,並且將指針圖片翻轉成第2號指針圖片Z2。
10、依以上步驟,分別將下面5張圖片分別設定為交換影像的行為。
11.按F12預覽,把滑鼠的指針懸停在每張圖片上,怎麼樣,感覺還不錯吧?