Background Image Fade Random

This site is best viewed in a modern browser with JavaScript enabled.

pwnuspoints

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?

pwnuspoints

Not possible?

pwnuspoints

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?

clueful

pwnuspoints;1140404 wrote:
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:

<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>

tirna

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.

pwnuspoints

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?

<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>

clueful

pwnuspoints;1140430 wrote:
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?

clueful

tirna;1140424 wrote:
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.