If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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?

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.

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?

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.