Use CSS to implement mouse-click Special Effects

If you can apply CSS well, your homepage will be well dressed. Next we will introduce you to the special style of clicking with a mouse in CSS.

1. Set the followingCodeCopy to and between your home page.

<Style>. Shadow {
Filter: Shadow (color = blue, direction = 225)
}
. Shadow1 {
Filter: Shadow (color = Red, direction = 225)
}
. Shadow2 {
Filter: Shadow (color = green, direction = 225)
}
. Div {
Cursor: move; filter: blur (add = ture, direction = 135, strength = 10); width: 800px
}
</Style> 〉

Here the blur filter is applied.

2. Insert an image into the page. For example, if I insert an image in the format of "〉. Add <TD id = flttgt style = "filter: light (Enabled = 1), ''width 300'' "width = 315> 〉.

Add <TD style = "vertical-align: Top" width = 314> to the next line of the inserted image 〉

3. After setting the image attributes, we also need to apply the Javascript script code, that is, to make the image move some special effects with the mouse. The Code is as follows.

<Script language = JavaScript> 〉
<〈! --
VaR g_numlights = 0;
VaR blurbs = new array ("the current dynamic filter gives the webpage more interactivity to respond to user actions. "," We use a light source filter to respond to users' clicks. Click an image to add a light source. "," Move the light source by capturing the user's mouse position. "," Too much programming is not required. ");
Window. onload = setlights;
Document. onclick = keyhandler;
Flttgt. onmousemove = mousehandler;
Function setlights (){
Flttgt. Filters [0]. Clear ();
Flttgt. Filters [0]. addcone (5,100,100,225,225, 15 );
If (g_numlights> 0 ){
Flttgt. Filters [0]. addcone (400,170, 5,100,100,225 );
If (g_numlights> 1 ){
Flttgt. Filters [0]. addcone (320,330, 5,100,100, 0,225,225, 60, 15 );
}
}
}
Function keyhandler ()
{
G_numlights = (g_numlights + = 1) % 4;
Holder. innerhtml = blurbs [g_numlights];
Setlights ();
}
Function mousehandler ()
{
X = (window. event. x-80 );
Y = (window. event. y-80 );
Flttgt. Filters [0]. movelight (1, x, y, 5, 1 );
If (g_numlights> 0 ){
Flttgt. Filters [0]. movelight (1, x, y, 5, 1 );
If (g_numlights> 1)
{
Flttgt. Filters [0]. movelight (2, X, Y, 5, 1 );
}
}
}
</SCRIPT> 〉

In this way, you can set a special image effect.