Use CSS to implement mouse click effects_CSS/HTML

If you can apply CSS well, your homepage will look beautiful. Below I will introduce to you a mouse click special effect image made with CSS.

1. Copy the following code into and between your homepage.

〈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 into the page. For example, I inserted

Add 〈TD style="VERTICAL-ALIGN: top" width=314〉 to the line below the picture we just inserted.

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

〈script language=Javascript〉
　　!--
　var g_numlights=0;
　var blurbs= new Array("The current dynamic filter gives the web page more interactive performance to respond to the user Action. "," We use the light source filter to respond to the user's click. Clicking on the image can move the light source by capturing the user's mouse position. ") ;
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); 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 up a more personalized picture effect