我們要制作出一列7個(gè)按鈕的圖片，并且在這一列的按鈕圖片的前面加上一個(gè)指針，我們要實(shí)現(xiàn)的效果是當(dāng)我們?cè)趯⑹髽?biāo)移向某一個(gè)按鈕圖片的時(shí)候，這個(gè)按鈕上面的文字變換顏色。并且指針指向這張圖片(效果如圖1所示)。


圖一

制作原理

　　交換圖像的制作原理是應(yīng)用到Dreamweaver中的行為面板上的翻轉(zhuǎn)圖像(Swap image)這一個(gè)工具。將它設(shè)置成為當(dāng)產(chǎn)生鼠標(biāo)懸停在某一個(gè)按鈕圖片的動(dòng)作的時(shí)候，讓按鈕本身實(shí)現(xiàn)一個(gè)圖像的交換(交換成為黃色文字的圖片)，與此同時(shí)設(shè)計(jì)指針圖像的交換(交換成為指針指向當(dāng)前按鈕的指針圖片)，以實(shí)現(xiàn)上述效果的實(shí)現(xiàn)。

　　^-^：其實(shí)網(wǎng)頁上的一些東西看起來似乎很神秘，可究其根源它也只不過是幾張圖片或幾個(gè)圖層的簡(jiǎn)單變化而已。

　　制作材料

　　這里演示的是7張按鈕圖片的翻轉(zhuǎn)，所以，我們需要14張按鈕圖片和7張指針圖片共21張圖片的制作來實(shí)現(xiàn)所示效果。其中7張前臺(tái)按鈕圖片分別命名為B1-1~B1-7，7張后臺(tái)按鈕圖片分別命名為B2-1~B2-7，其中7張指針圖片分別命名為Z1~Z7，它們的指針分別指向第一到第七個(gè)按鈕。您可以用Fireworks等圖片制作軟件來制作按鈕圖片。

　　制作方法

　　1、建立網(wǎng)頁文件。

　　2、插入一個(gè)7乘2的表格，并且把左面的一列表格合并，用來插入指針圖片。而右面的七個(gè)表格用來插入按鈕圖片。

　　3、在左面的表格中插入第一張指針圖片Z1，在右面的7行單元格中分別插入藍(lán)色的前臺(tái)按鈕B1-1~B1-7(效果如圖2所示)。


圖2

4、點(diǎn)擊“窗口(Windows)→行為”，調(diào)出行為面板。

　　5、選中第一個(gè)要設(shè)置行為的圖片，這里是寫有“指導(dǎo)思想”的按鈕圖片，即圖片B1-1。

　　6、點(diǎn)擊加號(hào)按鈕，在彈出菜單下選擇交換圖像(Swap image)，彈出交換圖像對(duì)話框。我們的主要部分的設(shè)置將在這個(gè)對(duì)話框中進(jìn)行。

　　7、點(diǎn)擊對(duì)話框當(dāng)中的瀏覽按鈕，然后選擇好這張按鈕圖片將要翻轉(zhuǎn)成的目的圖片，在本例中是帶有黃色文字的按鈕圖片，即圖片B2-1。然后點(diǎn)擊確定。

　　8、重復(fù)第6步的操作，在圖像的文本框中選中指針圖片Z1，然后，再次點(diǎn)擊瀏覽按鈕，把它翻轉(zhuǎn)成第1個(gè)指針文件，即Z1。點(diǎn)擊確定。完成上述操作后，行為面板上的顯示結(jié)果如圖3所示。


圖3

9、選中第2張按鈕圖片B1-2，按照上面的方法將它本身翻轉(zhuǎn)成按鈕B2-2，并且將指針圖片翻轉(zhuǎn)成第2號(hào)指針圖片Z2。

　　10、依以上步驟，分別將下面5張圖片分別設(shè)置成為交換圖像的行為。

　　11、按F12預(yù)覽，把鼠標(biāo)的指針懸停在每張圖片上，怎么樣，感覺還不錯(cuò)吧？

　　總結(jié)

　　當(dāng)我們學(xué)習(xí)一種新的網(wǎng)頁制作技術(shù)時(shí)，千萬不要只停留在表面，一定要仔細(xì)專心琢磨，在基本的網(wǎng)頁技術(shù)的基礎(chǔ)上，不斷地有自己的創(chuàng)新，也只有這樣才可以制作出有自己特色的網(wǎng)頁圖片來，不斷地豐富自己的主頁空間。