Implement mouse click Effects with CSS _css/html

If you can apply CSS well, your homepage will be nicely dressed. Here is a description of the use of CSS to make a special mouse click Effect Chart.

1, copy the following code to your homepage 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= "210". Before it joins 〈TD id=flttgt style= "Filter:light (enabled=1)," "Width=315〉.

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

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

〈script language=javascript〉
〈!--
var g_numlights=0;
var blurbs= new Array ("Now the live filter gives the Web page more interactivity to respond to the user's actions.") "," We used a light source filter to respond to user clicks. Click on the picture to increase the light source. "," to move the light source by capturing the user's mouse position. "," does not require 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〉

So you can set up a more personalized picture effect.