Using CSS to implement mouse click Effects _css/html

If you can apply CSS well, your homepage will be well-dressed. The following is to introduce a mouse with CSS to make a special click.

1. Copy the following code to your home page and between.

〈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〉

The blur filter is applied here.

2, insert a picture in the page, for example I insert is 〈img border= "0" src= "/article/uploadpic/2005-9/200598478474.jpg" width= "" height= "210". Before it joins 〈TD id=flttgt style= "Filter:light (enabled=1), ' ' Width '" width=315〉.

In the next line we inserted the picture just now add 〈td style= "Vertical-align:top" width=314〉

3, after setting the picture properties, we also apply JavaScript script code, that is, to make the picture follow the mouse to move some effects, the code is as follows.

〈script language=javascript〉
〈!--
var g_numlights=0;
The Var blurbs= new Array ("Now the live filter gives the page more interactive performance in response to the user's actions.") "," We used a light filter to respond to user clicks. Click on the image to increase the light source. "," Moves the light by capturing the location of the user's mouse. "," does not require too much programming. ");
Window.onload=setlights;
Document.onclick=keyhandler;
Flttgt.onmousemove=mousehandler;
function Setlights () {
Flttgt.filters[0].clear ();
Flttgt.filters[0].addcone (0,0,5,100,100,225,225,0,60,15);
if (g_numlights>0) {
Flttgt.filters[0].addcone (400,170,5,100,100,225,0,0,160,15);
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〉

This will set up a more personalized picture effect

