Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Falling images code modification

  1. #1
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Falling images code modification

    Hi all,

    I have this variety of falling images through the browser screen code and am trying to modify it but am not successful so can you please try to help?

    What I want is two things that would be different from what it does now:

    1. When the falling images (leaves) reach either the right or bottom side of the browser a scrollbar appears and starts jumping up and down, I want the images just to disappear at the user-set browser size without the scrollbars to show up, is that possible and how?

    2. Can the falling images (leaves) be links? In other words, can they be clicked and take the user to another page?

    Thanks!!

    Heres' the code:

    //////////////////

    <SCRIPT type="text/javascript">
    /*
    Thank you!!
    */



    grphcs=new Array(2)
    Image0=new Image();
    Image0.src=grphcs[0]="images/leaf1.png";
    Image1=new Image();
    Image1.src=grphcs[1]="images/leaf2.png"




    // How many?
    Amount=4;

    Ypos=new Array();
    Xpos=new Array();
    Speed=new Array();
    Step=new Array();
    Cstep=new Array();
    ns=(document.layers)?1:0;
    ns6=(document.getElementById&&!document.all)?1:0;

    if (ns){
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write("<LAYER NAME='sn"+i+"' LEFT=200 TOP=0><img src="+rndPic+"></LAYER>");
    }
    }
    else{
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
    }
    document.write('</div></div>');
    }
    Hwin=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
    WWin=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
    for (i=0; i < Amount; i++){
    Ypos[i] = Math.round(Math.random()*Hwin);
    Xpos[i] = Math.round(Math.random()*WWin);
    Speed[i]= Math.random()*5+3;
    Cstep[i]=0;
    Step[i]=Math.random()*0.1+0.05;
    }
    function fall(){
    var Hwin=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
    var WWin=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;


    for (i=0; i < Amount; i++){
    sy = Speed[i]*Math.sin(90*Math.PI/180);
    sx = Speed[i]*Math.cos(Cstep[i]);
    Ypos[i]+=sy;
    Xpos[i]+=sx;
    if (Ypos[i] > Hwin){
    Ypos[i]=-60;
    Xpos[i]=Math.round(Math.random()*WWin);
    Speed[i]=Math.random()*5+3;
    }
    if (ns){
    document.layers['sn'+i].left=Xpos[i];
    document.layers['sn'+i].top=Ypos[i];
    }
    else if (ns6){
    document.getElementById("si"+i).style.left=Math.min(WWin,Xpos[i]);
    document.getElementById("si"+i).style.top=Ypos[i];
    }
    else{
    eval("document.all.si"+i).style.left=Xpos[i];
    eval("document.all.si"+i).style.top=Ypos[i];
    }
    Cstep[i]+=Step[i];
    }
    setTimeout('fall()',120);
    }
    window.onload=fall
    //-->

    </SCRIPT>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's:

    http://www.dynamicdrive.com/dynamicindex3/leaves.htm

    Please reinstate the credit.

    It doesn't appear to have the first problem. For the second thing, you can put a link in this line:

    Code:
    document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
    like:

    Code:
    document.write('<a href="http://www.google.com/"><img id="si'+i+'" src="'+rndPic+'" style="border-width:0;position:absolute;top:0px;left:0px"></a>');
    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hey John,
    Thanks a lot for the reply. I'll restore this person's credit although I got it from someone else.
    The first problem is present even in the link you sent me, the original code. You can see that when you scroll all the way to the bottom and wait when a leaf reaches it. It is when the scroll bar starts to expand and contract. Here's what's happening clearly demonstrated on my site under development: http://karmacats.tv/dev/testi.html

    About the second problem, the inserted link tag works (thanks!) but I meant is that I'd like to have every image (in my site's example, the falling bouquets) go to a different URL rather than everyone go to the same one..
    Thanks a lot,
    Julian

  4. #4
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Just to be more clear, I have to different images, bouquet.jpg and bouquet2.jpg, falling, and would like to make bouquet.jpg go to one URL and bouquet2.jpg go to another. Alternatively, I could have more images "falling" and wonder if it'd be possible to make them each link to something different.
    Thanks again!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Try this updated version:

    http://home.comcast.net/~jscheuer1/s...s_bidirect.htm

    Use your browser's 'view source' to get the code.

    To prevent the dancing scrollbars with such large images, you will probably have to increase 60 (two places) in this line:

    Code:
    Ypos[i]=(Ypos[i] > WinHeight&&dir==1)? -60 : (Ypos[i] < 0 && dir==-1)? WinHeight+60 : Ypos[i];
    Use the height of your largest image.

    I know the demo has them going up, but you may make them going down in the configuration:

    Code:
    var dir=-1    // Set 'falling' direction (1 for down, -1 for up)
    As for linking specific images, change this section:

    Code:
    else{
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
    }
    to:

    Code:
    else{
    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
    for (i = 0; i < Amount; i++){
    var P=Math.floor(Math.random()*grphcs.length);
    rndPic=grphcs[P];
    rndLink=hrefs[P];
    document.write('<a href="'+rndLink'+"><img id="si'+i+'" src="'+rndPic+'" style="border-width:0;position:absolute;top:0px;left:0px"></a>');
    }
    And where you have:

    Code:
    grphcs=new Array(2)
    Image0=new Image();
    Image0.src=grphcs[0]="images/buquet.png";
    Image1=new Image();
    Image1.src=grphcs[1]="images/buquet2.png"
    Replace that with:

    Code:
    grphcs = [];
    hrefs = [];
    Image0=new Image();
    Image0.src=grphcs[0]="images/buquet.png";
    hrefs[0] = 'whatever.htm';
    Image1=new Image();
    Image1.src=grphcs[1]="images/buquet2.png"
    hrefs[1] = 'someother.htm';
    If they're in another folder, you may use the relative or absolute path for the hrefs. If they're on another site, use the absolute path.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hey John,

    The links code works fine, still wasn't able to get rid of the dancing scrolls though even when I increased the 60 to 213 (height of my biggest image) in the line:

    Ypos[i]=(Ypos[i] > WinHeight&&dir==1)? -213 : (Ypos[i] < 0 && dir==-1)? WinHeight+213 : Ypos[i];

    Thanks, thanks!
    ----------------
    http://karmacats.tv/dev/testi.html

  7. #7
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Also, is there something I can add to make the links to open in a new window rather than replacing the url i'm on?
    Thank yoooooouuuuu...

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Works OK in IE, but I see what you mean in others. I'll look into it and get back to you. About opening in a new window, you can put:

    Code:
    document.write('<a target="_blank" href="'+rndLink'+"><img id="si'+i+'" src="'+rn . . .
    That will open a new window (or tab, that's up to the browser) for each link clicked. If you use _new instead of _blank, then it will reuse the new window or tab - like if you click once and get a new window, and click again it will put that link into the same new window.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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">&nbsp;</td>
        <td width="29%" height="153">&nbsp;</td>
      </tr>
      <tr>
        <td height="206">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/ring1.jpg" width="236" height="243" /></td>
      </tr>
    </table>
    
    </center>
    
    </body>
    
    
    
    
    </html>
    Last edited by jscheuer1; 07-15-2011 at 09:34 AM. Reason: adjust speed
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    julianbremann (07-15-2011)

  11. #10
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I love you.
    Thanks so much..

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •