After looking at that script, I kept thinking that I couldn't believe I left something so messy as my final effort on that. I hadn't. Try this out:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>rew</title>
<META name="description" content="ref">
<META name="keywords" content="ref">
</head>
<body background="images/wedding.jpg" topmargin="120px">
<script type="text/javascript">
/*
* Falling/Rising - by John Davenport Scheuer - aka:jscheuer1
* Very freely adapted from - Autumn leaves - by Kurt Grigg (kurt.grigg@virgin.net)
* Visit http://www.dynamicdrive.com for TOS.
* Modified by jscheuer1 in http://www.dynamicdrive.com/forums
* This credit must remain for legal use.
*/
fall.dir=-1; // Set 'falling' direction (1 for down, -1 for up).
fall.speed=60; // 20 to whatever (70 is pretty slow), higher numbers are slower
fall.amount=8; // Set max number of images to fall at once, the smaller the images, the higher this can be.
fall.sway=10; // Set amount of left/right swaying of objects (default=10), higher numbers produce more sway.
fall.limit=0; // Set number of fallings/risings until effect should end, use 0 for no end.
fall.target='_new'; // Set target for links
fall.click="return true;" //set onclick function for linked images
// Pre-load your image(s) below!
if(document.images){ // <-- Do Not Edit or remove this line!!!
fall.grphcs=[];
fall.hrefs=[];
fall.image0=new Image();
fall.image0.src=fall.grphcs[0]="images/buquet.png";
fall.hrefs[0] = 'http://msn.com';
fall.image1=new Image();
fall.image1.src=fall.grphcs[1]="images/buquet2.png";
fall.hrefs[1] = 'http://google.com';
//////////////// Stop Editing //////////////
}
fall.prepare=function(){
fall.di=document.getElementById;
fall.da=document.all;
if (!document.images||(!fall.di&&!fall.da))
return;
fall.iebod=function(){
return (document.compatMode && document.compatMode.indexOf('CSS')!=-1)? document.documentElement : document.body;
}
fall.get=function(id){return fall.di? document.getElementById(id) : fall.da[id];};
fall.t1=fall.iebod().scrollWidth;
document.write('<a href="'+fall.hrefs[0]+'" target="'+fall.target+'" onclick="'+fall.click+'"><img id="fall_test" src="'+fall.grphcs[0]+'" style="border-width:0;position:fixed!important;position:absolute;top:-2000px;left:80000px"></a>');
fall.t2=fall.iebod().scrollWidth;
if(fall.t2>fall.t1)
fall.overflows=true;
fall.get('fall_test').style.left='-2000px';
fall.zero=(fall.di&&fall.get('fall_test').style.position=='fixed')||(document.defaultView&&document.defaultView.getComputedStyle(fall.get('fall_test'), null).getPropertyValue('position')=='fixed');
if(fall.get('fall_test').parentNode&&document.createElement)
fall.get('fall_test').parentNode.removeChild(fall.get('fall_test'));
fall.Ypos=new Array();
fall.Xpos=new Array();
fall.Speed=new Array();
fall.Step=new Array();
fall.Cstep=new Array();
fall.speed=Math.max(20, fall.speed);
fall.set_ims();
}
fall.set_ims=function(){
if(fall.overflows||!fall.zero)
document.write('<div id="fall0" style="position:fixed!important;overflow:hidden;position:absolute;">');
for (fall.i = 0; fall.i < fall.amount; fall.i++){
fall.P=Math.floor(Math.random()*fall.grphcs.length);
document.write('<a href="'+fall.hrefs[fall.P]+'" target="'+fall.target+'" onclick="'+fall.click+'"><img alt="" id="si'+fall.i+'" onload="fall.fall_start();" src="'+fall.grphcs[fall.P]+'" style="border-width:0;position:fixed!important;position:absolute;top:-2000px;left:-2000px"></a>');
}
if(fall.overflows||!fall.zero)
document.write('<\/div>');
fall.WinHeight=function(){return window.innerHeight?window.innerHeight:fall.iebod().clientHeight;};
fall.WinWidth=function(){
if(window.innerWidth&&fall.iebod().clientWidth)
return Math.min(window.innerWidth,fall.iebod().clientWidth);
return window.innerWidth?window.innerWidth:fall.iebod().clientWidth;
}
for (fall.i=0; fall.i < fall.amount; fall.i++){
fall.Ypos[fall.i] = Math.round(Math.random()*fall.WinHeight());
fall.Xpos[fall.i] = Math.round(Math.random()*fall.WinWidth());
fall.Speed[fall.i]= (Math.random()*5+3)*fall.dir;
fall.Cstep[fall.i]=0;
fall.Step[fall.i]=Math.random()*0.1+0.05;
}
}
fall.falls=0;
function fall(){
var fac, cont=0, s='style', d='display', f=fall.dir, w=fall.WinWidth, h=fall.WinHeight;
var hscrll=fall.zero?0:typeof window.pageYOffset=='number'?window.pageYOffset:fall.iebod().scrollTop?fall.iebod().scrollTop:0;
var wscrll=fall.zero?0:typeof window.pageXOffset=='number'?window.pageXOffset:fall.iebod().scrollLeft?fall.iebod().scrollLeft:0;
for (var i=0; i < fall.amount; i++){
if(fall.overflows||!fall.zero){
var sc = fall.get('fall0');
sc[s].top=hscrll+'px';
sc[s].left=wscrll+'px';
sc[s].width=w()+'px';
sc[s].height=h()+'px';
}
var sy = fall.Speed[i]*Math.sin(90*Math.PI/180);
var sx = fall.Speed[i]*Math.cos(fall.Cstep[i]);
fall.Ypos[i]+=sy;
fall.Xpos[i]+=sx*fall.sway*0.1;
fac=fall.get('si'+i).offsetHeight;
if (fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0){
fall.Xpos[i]=Math.round(Math.random()*w());
fall.Speed[i]=(Math.random()*5+3)*f;
}
if(i==fall.amount-1&&(fall.Ypos[i] > h()&&f>0||fall.Ypos[i] < fac*-1 && f<0))
fall.falls++;
fall.Ypos[i]=(fall.Ypos[i] > h()&&f>0)? fac*-1 : (fall.Ypos[i] < fac*-1 && f<0)? h()+fac : fall.Ypos[i];
if(fall.limit&&fall.falls>fall.limit&&((f>0&&fall.Ypos[i]==fac*-1)||(f<0&&fall.Ypos[i]==h()+fac)))
fall.get('si'+i)[s][d]='none';
fall.df=fall.da&&!fall.di||window.opera&&(typeof opera.version=='undefined'||opera.version()<9)? (f<0?fac*2:fac):0;
fall.get('si'+i)[s].left=fall.df? Math.min(fall.Xpos[i], w()-fall.get('si'+i).offsetWidth)+'px' : fall.Xpos[i]+'px';
fall.get('si'+i)[s].top=fall.Ypos[i]-fall.df+'px';
for (var j = 0; j < fall.amount; j++)
if (fall.get('si'+j)[s][d]!='none')
cont=1;
if(!cont){
clearInterval(fall.fall);
if(fall.overflows||!fall.zero)
sc[s][d]='none';
}
fall.Cstep[i]+=fall.Step[i];
}
}
fall.starting=1;
fall.fall_start=function(){
if (fall.started||fall.amount>fall.starting++)
return;
fall.started=true;
fall.fall=setInterval('fall()', fall.speed);
};
fall.prepare();
</script>
<center>
<table width="1200px">
<tr>
<td width="22%"><img src="images/ring2.jpg" width="209" height="202" /></td>
<td width="582px" rowspan="3" background="images/labelmate4.png">
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
</div> </td>
<td width="29%"></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td width="29%" height="153"> </td>
</tr>
<tr>
<td height="206"> <img src="images/ring1.jpg" width="236" height="243" /></td>
</tr>
</table>
</center>
</body>
</html>
Falling images code modification
Reply With Quote
Bookmarks