Results 1 to 6 of 6

Thread: Snow Effect Random Image On Page Reload?

  1. #1
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Snow Effect Random Image On Page Reload?

    1) Script Title: Snow Effect

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamicindex3/snow.htm

    3) My Question:

    How can I code this script so on each page reload it will use a random image instead of just one?

    THANKS!

  2. #2
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here are a couple of alternate images I created that I am trying to get to fall on a page reload.

    I just need help to code this script to use alternate images on a page reload/refresh instead of just one image.

    I hope anyone can help please!

    Thanks!

    Yotsume

  3. #3
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I tried to alter the script this way but it doesn't work:

    HELP PLEASE!

    PHP Code:
    /******************************************

    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)

    * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code

    * Last updated Nov 9th, 05' by DD. This notice must stay intact for use

    ******************************************/



      //Configure below to change URL path to the snow image

      
    var snowsrc="images/misc/snowflake.gif"
      
    var snowman="images/misc/snowman.gif"
      
    var reindeer="images/misc/reindeer.gif"

      
    //Configure below to change number of snow to render

      
    var no 10;

      
    //Configure whether snow should disappear after x seconds (0=never):

      
    var hidesnowtime 0;

      
    // Configure how much snow should drop down before fading ("windowheight" or "pageheight")

      
    var snowdistance "pageheight";



    ///////////Stop Config//////////////////////////////////



      
    var ie4up = (document.all) ? 0;

      var 
    ns6up = (document.getElementById&&!document.all) ? 0;



        function 
    iecompattest(){

        return (
    document.compatMode && document.compatMode!="BackCompat")? document.documentElement document.body

        
    }



      var 
    dxxpyp;    // coordinate and position variables

      
    var amstxsty;  // amplitude and step variables

      
    var idoc_width 800doc_height 600



      if (
    ns6up) {

        
    doc_width self.innerWidth;

        
    doc_height self.innerHeight;

      } else if (
    ie4up) {

        
    doc_width iecompattest().clientWidth;

        
    doc_height iecompattest().clientHeight;

      }



      
    dx = new Array();

      
    xp = new Array();

      
    yp = new Array();

      
    am = new Array();

      
    stx = new Array();

      
    sty = new Array();

      
    snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snowflake.gif" snowsrc
      snowman
    =(snowman.indexOf("dynamicdrive.com")!=-1)? "snowman.gif" snowman
      reindeer
    =(reindeer.indexOf("dynamicdrive.com")!=-1)? "reindeer.gif" reindeer

      
    for (0no; ++ i) {  

        
    dx[i] = 0;                        // set coordinate variables

        
    xp[i] = Math.random()*(doc_width-50);  // set position variables

        
    yp[i] = Math.random()*doc_height;

        
    am[i] = Math.random()*20;         // set amplitude variables

        
    stx[i] = 0.02 Math.random()/10// set step variables

        
    sty[i] = 0.7 Math.random();     // set step variables

            
    if (ie4up||ns6up) {

          if (
    == 0) {

            
    document.write("<div id=\"dot"+"\" style=\"POSITION: absolute; Z-INDEX: "+"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");

            
    document.write("<div id=\"dot"+"\" style=\"POSITION: absolute; Z-INDEX: "+"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowman+"' border=\"0\"><\/a><\/div>");

          } else {

            
    document.write("<div id=\"dot"+"\" style=\"POSITION: absolute; Z-INDEX: "+"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");

            
    document.write("<div id=\"dot"+"\" style=\"POSITION: absolute; Z-INDEX: "+"; VISIBILITY: visible; TOP: 15px; right: 15px;\"><img src='"+snowman+"' border=\"0\"><\/div>");

          }

        }

      }



      function 
    snowIE_NS6() {  // IE and NS6 main animation function

        
    doc_width ns6up?window.innerWidth-10 iecompattest().clientWidth-10;

            
    doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight iecompattest().offsetHeight;

        for (
    0no; ++ i) {  // iterate for every dot

          
    yp[i] += sty[i];

          if (
    yp[i] > doc_height-50) {

            
    xp[i] = Math.random()*(doc_width-am[i]-30);

            
    yp[i] = 0;

            
    stx[i] = 0.02 Math.random()/10;

            
    sty[i] = 0.7 Math.random();

          }

          
    dx[i] += stx[i];

          
    document.getElementById("dot"+i).style.top=yp[i]+"px";

          
    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  

        }

        
    snowtimer=setTimeout("snowIE_NS6()"10);

      }



        function 
    hidesnow(){

            if (
    window.snowtimerclearTimeout(snowtimer)

            for (
    i=0i<noi++) document.getElementById("dot"+i).style.visibility="hidden"

        
    }





    if (
    ie4up||ns6up){

        
    snowIE_NS6();

            if (
    hidesnowtime>0)

            
    setTimeout("hidesnow()"hidesnowtime*1000)

            } 

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div style="height:400px;" ></div>
    <script type="text/javascript">
    
    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
    * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
    * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
    ******************************************/
      var imgs=[
       'http://www.dynamicdrive.com/forums/attachment.php?attachmentid=3676&stc=1&d=1292229638',
       'http://www.dynamicdrive.com/forums/attachment.php?attachmentid=3677&stc=1&d=1292229643',
       'http://www.dynamicdrive.com/dynamicindex3/snow.gif'
      ]
    
      //Configure below to change URL path to the snow image
      var snowsrc=imgs[Math.floor(Math.random()*imgs.length)];
      // Configure below to change number of snow to render
      var no = 10;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";
    
    ///////////Stop Config//////////////////////////////////
    
      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    
    	function iecompattest(){
    	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    	}
    
      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;
    
      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }
    
      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=snowsrc
      for (i = 0; i < no; ++ i) {
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
    		if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
          }
        }
      }
    
      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
    		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
          }
          dx[i] += stx[i];
          document.getElementById("dot"+i).style.top=yp[i]+"px";
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }
    
    	function hidesnow(){
    		if (window.snowtimer) clearTimeout(snowtimer)
    		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    	}
    
    
    if (ie4up||ns6up){
        snowIE_NS6();
    		if (hidesnowtime>0)
    		setTimeout("hidesnow()", hidesnowtime*1000)
    		}
    
    </script></body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is how I changed your code in red but it does not work. What did I miss?

    The original script works, but only one image at a time. Your code just didn't work.

    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div style="height:400px;" ></div>
    <script type="text/javascript">
    
    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
    * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
    * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
    ******************************************/
      var imgs=[
       'http://www.my.domain.com/images/misc/reindeer.gif',
       'http://www.my.domain.com/images/misc/snowman.gif',
       'http://www.my.domain.com/images/misc/snowflake.gif'
      ]
    
      //Configure below to change URL path to the snow image
      var snowsrc=imgs[Math.floor(Math.random()*imgs.length)];
      // Configure below to change number of snow to render
      var no = 10;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";
    
    ///////////Stop Config//////////////////////////////////
    
      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    
    	function iecompattest(){
    	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    	}
    
      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;
    
      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }
    
      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=snowsrc
      for (i = 0; i < no; ++ i) {
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
    		if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
          }
        }
      }
    
      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
    		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
          }
          dx[i] += stx[i];
          document.getElementById("dot"+i).style.top=yp[i]+"px";
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }
    
    	function hidesnow(){
    		if (window.snowtimer) clearTimeout(snowtimer)
    		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    	}
    
    
    if (ie4up||ns6up){
        snowIE_NS6();
    		if (hidesnowtime>0)
    		setTimeout("hidesnow()", hidesnowtime*1000)
    		}
    
    </script></body>
    
    </html>

  6. #6
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok silly me I just needed to delete the html warp code from the start and end of the javascript and it works perfectly!

    YOU ROCK THANKS SO MUCH!!!

    So for everyone the code should be:

    Code:
    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
    * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
    * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
    ******************************************/
      //Configure below to change URL path to the your list of images
      var imgs=[
       'http://www.globalschoolconnect.com/images/misc/reindeer.gif',
       'http://www.globalschoolconnect.com/images/misc/snowman.gif',
       'http://www.globalschoolconnect.com/images/misc/snowflake.gif'
      ]
    
      var snowsrc=imgs[Math.floor(Math.random()*imgs.length)];
      // Configure below to change number of snow to render
      var no = 10;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";
    
    ///////////Stop Config//////////////////////////////////
    
      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    
    	function iecompattest(){
    	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    	}
    
      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;
    
      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }
    
      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=snowsrc
      for (i = 0; i < no; ++ i) {
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
    		if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
          }
        }
      }
    
      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
    		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
          }
          dx[i] += stx[i];
          document.getElementById("dot"+i).style.top=yp[i]+"px";
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }
    
    	function hidesnow(){
    		if (window.snowtimer) clearTimeout(snowtimer)
    		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    	}
    
    
    if (ie4up||ns6up){
        snowIE_NS6();
    		if (hidesnowtime>0)
    		setTimeout("hidesnow()", hidesnowtime*1000)
    		}
    Last edited by yotsume; 12-13-2010 at 04:34 PM.

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
  •