www.webdeveloper.com
Results 1 to 8 of 8

Thread: Background Image Fade Random

  1. #1
    Join Date
    Jan 2011
    Posts
    8

    Thumbs up Background Image Fade Random

    Hello Friendly Neighborhood JavaScript Expert!

    I've got myself into some trouble, I really hope you can help me out! I promised a client some javascript functionality without actually knowing how to do it. It just seemed plausible so I gave my guarantee. The whole thing started when we decided it would be neat if the web page looked slightly different every time you visited.

    The functionality I'm looking for will fade the CSS associated to the html body tag. The tiled background image in particular.

    I have over 50 seamless tile background images of various dimensions stored in my default image folder. I'm hoping to find some script that will select and display one of the images at random and then fade to a new one every 10 or 20 seconds.

    I have no idea how to start writing this code. I sure hope it's possible.

    It might work if I had some script that replaced the background attribute of the body tag with an animation.. selecting from an array of image paths?

    Can you help me figure this out? Is it even possible?

  2. #2
    Join Date
    Jan 2011
    Posts
    8
    Not possible?

  3. #3
    Join Date
    Jan 2011
    Posts
    8

    Red face A compromise

    Maybe it would be good enough without the fading.

    I would be happy if I could just figure out how to load a random background image each time the page is loaded or refreshed.

    Any ideas there?

  4. #4
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by pwnuspoints View Post
    I would be happy if I could just figure out how to load a random background image each time the page is loaded or refreshed.
    You can't directly set the opacity of a background image. I suppose it could be simulated by having a full screen div whose opacity can be varied and overlaying it with the content in a separate div that has a clear background.

    You're not the first to ask for a random background image selector:
    Code:
    <script type='text/javascript'>
    
    function loadRandomBgImg()
    {   
     var args = loadRandomBgImg.arguments,
         dt = new Date(/*53637269707465726C61746976652E636F6D*/),
         cv, 
         idx, 
         lastIdx = ( cv = document.cookie.match( /(^|\s|;)lastBgIdx=(\d+)/ ) ) ? Number( cv[ 2 ] ) : -1;  
       
     while( ( idx = Math.floor( Math.random() * args.length ) ) === lastIdx )
     ;
      
     document.body.style.backgroundImage = 'url("' + args[ idx ] + '")' ; 
     
     dt.setDate( dt.getDate() + 30 );
     
     document.cookie = 'lastBgIdx=' + idx +';expires=' + dt.toGMTString();   
    }
    
    loadRandomBgImg( 'image.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg' ); /** Any number of your images here **/
    
    </script>


    Q: I found this code...
    A: Then find its author.

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    I wouldn't use cookies. You can bet your last dollar someone will come along with cookies disabled in their browsers and so it wouldn't work.

    If you do it without cookies it will work in all browsers.

  6. #6
    Join Date
    Jan 2011
    Posts
    8
    Thank you SO MUCH for the code clueful. I'm having trouble getting it to work.

    I've googled so many cut and paste tutorials and tried them.. None are working. I can't figure out why.

    Am I doing something wrong with my images?
    Code:
    <script type='text/javascript'>
    
    function loadRandomBgImg()
    {   
     var args = loadRandomBgImg.arguments,
         dt = new Date(/*53637269707465726C61746976652E636F6D*/),
         cv, 
         idx, 
         lastIdx = ( cv = document.cookie.match( /(^|\s|;)lastBgIdx=(\d+)/ ) ) ? Number( cv[ 2 ] ) : -1;  
       
     while( ( idx = Math.floor( Math.random() * args.length ) ) === lastIdx )
     ;
      
     document.body.style.backgroundImage = 'url("' + args[ idx ] + '")' ; 
     
     dt.setDate( dt.getDate() + 30 );
     
     document.cookie = 'lastBgIdx=' + idx +';expires=' + dt.toGMTString();   
    }
    
    loadRandomBgImg( 'img/PAT-001-default.gif', 'img/PAT-002-dandy.gif', 'img/PAT-003-dots.gif', 'img/PAT-004-retro.gif', 'img/PAT-005-swirl.gif', 'img/PAT-006-lines.gif', 'img/PAT-007-flower.gif', 'img/PAT-008-fabric.gif', 'img/PAT-009-granny.gif', 'img/PAT-010-hibisc.gif', 'img/PAT-011-town.gif', 'img/PAT-012-blossoms.gif', 'img/PAT-013-paisli.gif', 'PAT-014-paislii.gif', 'img/PAT-015-paisliii.gif', 'img/PAT-016-blomst.gif', 'img/PAT-017-micdot.gif', 'img/PAT-018-diff.gif', 'img/PAT-019.gif' ); /** Any number of your images here **/
    </script>

  7. #7
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by pwnuspoints View Post
    Thank you SO MUCH for the code clueful. I'm having trouble getting it to work.
    The syntax is correct, so either you don't have scripting enabled in your browser or the specified location of the images is incorrect.
    What is your folder structure and where is your document located in it?


    Q: I found this code...
    A: Then find its author.

  8. #8
    Join Date
    Dec 2010
    Posts
    207
    Quote Originally Posted by tirna View Post
    I wouldn't use cookies. You can bet your last dollar someone will come along with cookies disabled in their browsers and so it wouldn't work.

    If you do it without cookies it will work in all browsers.
    There's a difference between "cookie-dependent" and "cookie-enhanced". Cookies are used only to guarantee that the next image will be different to the the previous.
    The script won't fail in their absence.


    Q: I found this code...
    A: Then find its author.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles