你一定看到過很多網頁上的動態按鈕效果,一般而言實現它需要后臺的javascript(或vbscript)網頁腳本語言支持,對于只懂使用初級的“所見即所得”網頁編輯器的人來說確實是個難題。現在我們就來學一學制作動態按鈕的“傻瓜式”方法。我們以制作一個中英文切換的按鈕為例。
其實,動態按鈕的實現原理都是一樣的,首先制作按鈕的圖片,然后通過腳本語言捕獲鼠標在按鈕上的事件,對事件做出交換圖片的響應。在frontpage 2000里有交換圖片的現成語言包。
首先在photoshop或firework里制作兩張用于交換的按鈕圖片,大小均為:寬度80象素;高度15象素,并在其中輸入按鈕的文字,注意兩張圖片文字的相對位子應基本一致。
在frontpage中插入一個表格,大小與按鈕圖片的大小相同(寬80象素,高15象素),點擊插入圖片按鈕,在表格內插入初始化顯示的按鈕圖片,即按鈕在未進行動態變換時顯示的那張圖片,在這個例子中我們選擇有“english button”字樣的圖片為初始圖片。接下來我們就開始為它做動態效果。選擇菜單“格式”-“動態html效果”,出現動態html效果的對話框。確保要做動態變換的圖片為選中狀態的前提下,在dhtl效果多話框內將“開啟”選項選擇為“鼠標懸停”;應用選擇為“交換圖片”;并在下面一個選項內指定路徑為用于交換的“中文按鈕”圖片所在的路徑。
好了,一個動態按鈕效果的“傻瓜”式制作方法完成了。網頁保存后會有一個名為animate.js的腳本文件,你可以通過記事本打開它,這里面的就是有frontpage自動生成的腳本語言包。動態按鈕效果在frontpage里可以輕松的實現,你也可以改變用于交互的兩張圖片按照你的需要制作,注意在制作按鈕圖片時一定要設置兩張圖片的大小完全一致。
新聞熱點
疑難解答