用CSS制作Alpha濾鏡測試板
alpha濾鏡給我們制作網(wǎng)頁(yè)特效提供了較大的創(chuàng )作空間，但由于它控制參數較多，在實(shí)際應用時(shí)，為了確定一組合適的參數值，不得不反復調整修改，在編輯窗口和預覽窗口來(lái)回倒騰，甚是麻煩。我在這里給你介紹一種方法，制作一個(gè)“Alpha濾鏡參數測試板”，在測試板上輸入參數值后，點(diǎn)一下鼠標，立即可看到結果，完全的“立等可見(jiàn)”，使你很快就能獲得一組合適地參數值，從而給你節約許多寶貴時(shí)間。先看看下面的效果圖：
Alpha濾鏡測試板初始參數效果圖
Alpha濾鏡測試板改變參數后效果圖
測試板具體的制作方法：
1、輸入一段文字或插入一張圖片；
2、制作一個(gè)alpha濾鏡（濾鏡的制作方法請參看“CSS濾鏡應用技巧”專(zhuān)題的有關(guān)文章），名稱(chēng)為：.alpha1。參數任意，不是使用Dreamweaver的網(wǎng)友，可直接把下面的濾鏡代碼復制到網(wǎng)頁(yè)源代碼的〈head〉與〈/head〉之間；
〈style type="text/css"〉
〈!--
.alpha1 {filter:alpha(opacity=50) }
--〉
〈/style〉
3、插入一個(gè)層，給層取名為：myimage，這一點(diǎn)很重要，否則Javascript程序將無(wú)法執行，因它不知對那個(gè)對象操作。在層上插入一張圖片或寫(xiě)上一段文字（若是用文字則應給層設置背景色），在層上加載alpha濾鏡。這個(gè)圖層必需能覆蓋信住下面的文字或圖象；
4、在上面插入的層中再插入一個(gè)層（這個(gè)圖層應放置在上次插入的圖層的下方，不要相互遮蓋），并在層上做一個(gè)輸入alpha濾鏡主要參數的表單，像圖1所示的那樣，表單中要加入一個(gè)“onchage”事件來(lái)調用Javascript函數，以達到動(dòng)態(tài)改變Alpha濾鏡參數的目的。網(wǎng)頁(yè)源代碼中表單的代碼是這樣的：
〈form〉
〈p〉輸入透明度
〈input type="text" name="opacity" size="4" value="100" onChange="setfilter()"〉
〈br〉
輸入結束狀態(tài)的透明度
〈input type="text" name="finishopacity" size="4" value="0" onChange="setfilter()" 〉
〈br〉
輸入樣式的值
〈input type="text" name="setstyle" size="3" value="0" onChange="setfilter()" 〉
〈/p〉
〈/form〉
這段代碼中的“onChange="setfilter()"”在用Dreamweaver制作表單時(shí)不能自動(dòng)生成，必須手動(dòng)加入。表單中的初始值也就是Alpha濾鏡的初始參數值。
5、在網(wǎng)頁(yè)源代碼〈head〉與〈/head〉之間插入下面這段Javascript程序：
〈script language="JavaScript"〉
〈!--
function setfilter()
{
myimage.filters.alpha.opacity=document.forms(0).opacity.value;
myimage.filters.alpha.finishopacity=document.forms(0). finishopacity.value;
myimage.filters.alpha.style=document.forms(0).setstyle.value;
}
--〉
〈/script〉
這段程序的作用是把在表單中輸入的濾鏡參數值傳給Alpaha濾鏡。
6、在網(wǎng)頁(yè)載入時(shí)調用Javascript中的“selfilter”函數，也就是在〈body〉標記中加上這樣的一句代碼：onload="setfilter"。其目的是使 Alpha濾鏡獲得初始參數值。
好了，制作結束，按F12看效果吧！從此后，你不用再為選擇alpha濾鏡參數值勤而煩惱了。實(shí)際上對于其它參數較多的CSS濾鏡都可仿照本例的方法，制作一個(gè)測試板，以解選擇參數值之苦。
