Make Alpha Filter test board with CSS

css| Filter

Alpha Filter gives us a great space to create web effects, but because it has more control parameters, in the practical application, in order to determine a set of appropriate parameter values, have to adjust the changes repeatedly, in the editing window and preview window back and forth, is very troublesome. I'm here to introduce you to a method ...
Alpha Filter gives us a great space to create web effects, but because it has more control parameters, in the practical application, in order to determine a set of appropriate parameter values, have to adjust the changes repeatedly, in the editing window and preview window back and forth, is very troublesome. I'm here to introduce you to a method, make an "Alpha Filter parameter Test Board", after entering the parameter value on the test board, click the mouse, immediately see the result, complete "erecting visible", so that you can quickly get a set of appropriate parameter values, so that you save a lot of valuable time.
Test Board specific method of production:
1. Enter a piece of text or insert a picture;
2, the production of an alpha filter, the name is:. Alpha1. Parameters are arbitrary, not using Dreamweaver users, you can directly copy the following filter code to the Web page source code 〈head〉 and 〈/head〉;
〈style type= "Text/css"
〈!--
. alpha1 {Filter:alpha (opacity=50)}
--〉
〈/style〉
3, insert a layer, the layer named: MyImage, this is important, otherwise the JavaScript program will not be able to execute, because it does not know the object operation. Insert a picture on the layer or write a paragraph of text (you should set the background color for the layer if you use text) and load the Alpha filter on the layer. This layer must be able to cover the letter or image below;
4, insert a layer in the above inserted layer (this layer should be placed below the last inserted layer, do not cover each other, and make a form on the layer that inputs the main parameters of the Alpha filter, as shown in Figure 1, to include a "onchage" in the form Event to invoke the JavaScript function to dynamically change the Alpha filter parameters. The code for the form in the Web page source code is like this:
〈form〉
〈p〉 Input Transparency
〈input type= "text" name= "opacity" size= "4" value= "100"
〈br〉
Enter transparency for end state
〈input type= "text" name= "finishopacity" size= "4" value= "0"
〈br〉
Enter a value for the style
〈input type= "text" name= "SetStyle" size= "3" value= "0"
〈/p〉
〈/form〉
The "" In this code cannot be generated automatically when making a form with Dreamweaver and must be added manually. The initial value in the form is the initial parameter value of the Alpha filter.
5. Insert the following JavaScript program between the Web page source code 〈head〉 and the 〈/head〉:
〈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〉
The purpose of this program is to pass the filter parameter values entered in the form to the Alpaha filter.
6. Call the "Selfilter" function in JavaScript when the Web page is loaded, that is, add such a code to the 〈body〉 tag:. The purpose is to get the alpha filter to obtain the initial parameter value.
OK, finish the production, press F12 to see the effect! Since then, you don't have to worry about choosing Alpha Filter Parameters on duty. In fact, for other CSS filters with more parameters, we can make a test board to solve the pain of choosing the parameter value by imitating the method of this example.