I have found one cool javascript code which can be embedded in header.html to let pics drop from the top and down to the bottom, nevertheless, the pics will go back to the top but not disappear, huh, it is a little disppointed, who can help to modify it, many thanks.
The belowing is added in the <body></body>
<body onload=doplay()>
#Layer0 {
Z-INDEX: 10; LEFT: -50px; WIDTH: 60px; POSITION: absolute; TOP: -50px; HEIGHT: 60px
}
#Layer1 {
Z-INDEX: 20; RIGHT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px
}
#Layer2 {
Z-INDEX: 30; RIGHT: -150px; WIDTH: 60px; POSITION: absolute; TOP: -120px; HEIGHT: 60px
}
#Layer3 {
Z-INDEX: 40; LEFT: -200px; WIDTH: 60px; POSITION: absolute; TOP: -150px; HEIGHT: 60px
}
BODY {
FONT-SIZE: 9pt; WORD-SPACING: normal; LINE-HEIGHT: 13pt
}
P {
FONT-SIZE: 9pt; WORD-SPACING: normal; LINE-HEIGHT: 13pt
}
TD {
FONT-SIZE: 9pt; WORD-SPACING: normal; LINE-HEIGHT: 13pt
}
</STYLE>
<SCRIPT language=JavaScript>
xfirst = new Array(80,150,220,310,400,590,680); //the start position of x
yfirst = new Array(0,180,70,10,50,30,140); //the start position of y
xcoor = new Array(80,150,220,310,400,590,680);
ycoor = new Array(0,180,70,10,50,30,140);
xdirec= new Array(1,-1,-1,1); //the start direction -1 is to left and 1 is to right
var ns = navigator.appName == "Netscape";
function doplay()
{
var x,y,i,j,w,h;
w = window.screen.width - 100;
// w = document.body.clientWidth - 100;
h = window.screen.height - 100;
// h = document.body.clientHeight - 50;
for(j=0;j<4;j++){
i=Math.random();
if (i > 0.95) xdirec[j] = 0 - xdirec[j];
x=Math.floor(10*Math.random());
y=Math.floor(5*Math.random());
if ( xdirec[j] == 1 ) xcoor[j] = xcoor[j] + x;
else xcoor[j] = xcoor[j] - x;
ycoor[j] = ycoor[j] + y;
if ( xcoor[j] >= w ) {xcoor[j]=w;xdirec[j]=-1;}
if ( xcoor[j] <= 0 ) {xcoor[j]=0;xdirec[j]=1;}
if ( ycoor[j] >= h ) {xcoor[j]=xfirst[j];ycoor[j]=yfirst[j];}
if (!ns){ eval('document.all'+'["Layer'+j+'"]'+'.style.left='+xcoor[j]);
eval('document.all'+'["Layer'+j+'"]'+'.style.top='+ycoor[j]);}
else { eval('document.layers'+'["Layer'+j+'"]'+'.left='+xcoor[j]);
eval('document.layers'+'["Layer'+j+'"]'+'.top='+ycoor[j]);}
}
setTimeout('doplay()',200);
}
//-->
</SCRIPT>
<DIV id=Layer0><IMG height=121 src="absolute path of your image/image1.gif" width=250> </DIV>
<DIV id=Layer1><IMG height=200 src="absolute path of your image/image2.gif" width=135> </DIV>
<DIV id=Layer2><IMG height=105 src="absolute path of your image/image3.gif" width=250> </DIV>
<DIV id=Layer3><IMG height=147 src="absolute path of your image/image4.gif" width=165> </DIV>
Images can be added more you like as rain drops, snowflakes, clouds,adv, etc.