CSS Q: Use a different image on reload? | WPDFD.com Forums

Schomer said:

10/27/04, 301 07 2004 2004:%i:1098932853 23:07:33

Anyone know of a way to have a page display a different image each time the page is reloaded, or maybe change the image each day?

I have a header div with a background image, which I would like to have changed periodically. Right now, I do it manually by changing the CSS doc.

I would love a script of some sort that would do this for me - where I give it a list of images and it rotates through the list.

Thanks in advance for any help.

Schomer

Joe Gillespie said:

10/28/04, 302 26 2004 2004:%i:1098941209 01:26:49

It's very simple to do with JavaScript. You can either document.write the image onto the page at the appropriate place or swap the background image of a div. You can do it on a per load basis with random images or sequential images or changing on a daily basis.

It makes things slightly easier if you give the images sequential filenames pic1.jpg, pic2.jpc ...etc and they are all the same pixel dimensions.

Here is the script that I use on the WPDFD home page to randomly rotate the banner ads using document.write

http://www.wpdfd.com/banrotatedir.js

If you want something else, just shout.

Schomer said:

10/28/04, 302 03 2004 2004:%i:1098943431 02:03:51

Thank you so much for your help!

What you explained sounds great - exactly what I'm looking to do (replace a background image in a div). However, I took one look at your script and realized it was way over my head in terms of parsing through all your content to see what it's actually doing.

Would it be too much trouble showing me a stripped down version of the script, along with what you put in your HTML/CSS doc to make it work?

Right now, I have the basic CSS doc with:

#header {
...
background-image: url (image1.jpg);
... }

And the standard "div id="header" in my HTML file.

I can name the images anything I want, and they are all the same size.

Joe Gillespie said:

10/28/04, 302 39 2004 2004:%i:1098956352 05:39:12

This is what you want. Your pictures are named pic1.gif...pic4.gif and in a sub folder called images. You can have as many as you like, just change the number in +rnd(4)+.

The rnd(n) function returns a random number between 1 and n and the swapPic() function changes the background picture.

Sequential numbers would require you to use coookies so I won't complicate matters.

        "http://www.w3.org/TR/html4/loose.dtd">


      
      Random Pictures

Schomer said:

10/28/04, 302 03 2004 2004:%i:1098993786 16:03:06

Okay, WOW! You could not have made that any easier for me!!! I dropped it in, and it worked immediately.

THANK YOU THANK YOU THANK YOU

Schomer said:

10/29/04, 303 42 2004 2004:%i:1099075373 14:42:53

For anyone interested, I did a little write up about this script and put together some sample files for anyone who wants to take a quick look at how it works. It's so easy, my write up is clearly overkill, but here it is:

http://www.picturebridge.com/random-image

Joe Gillespie said:

10/29/04, 303 47 2004 2004:%i:1099086437 17:47:17

Excellent. Now, here's a challenge for you. See if you can work out a way to preload the images so that there is no delay between one and the next

Schomer said:

11/02/04, 307 12 2004 2004:%i:1099440757 19:12:37

Holy crap, Batman. Preload a randomly-selected image? That kind of makes my head hurt thinking about it. You're talking to the guy who had to copy-paste your script into my page instead of writing my own!

By the way, you mentioned cookies would have to be used to have a script step the user through each image, each time they visit the site. Would that also be the case if we wanted to display a specific image each day of the month, or would something like that not need cookies? For instance, I create 31 images, and it displays whichever one matches the current day of the month...

Joe Gillespie said:

11/03/04, 308 12 2004 2004:%i:1099469530 03:12:10

schomer said:
Holy crap, Batman. Preload a randomly-selected image? That kind of makes my head hurt thinking about it. You're talking to the guy who had to copy-paste your script into my page instead of writing my own!

He he. It might sound difficult but it isn't.

schomer said:
By the way, you mentioned cookies would have to be used to have a script step the user through each image, each time they visit the site. Would that also be the case if we wanted to display a specific image each day of the month, or would something like that not need cookies? For instance, I create 31 images, and it displays whichever one matches the current day of the month...

The cookies are only necessary to remember the last image loaded between page visits. To do it on a day by day basis, you can get the number from the Date object.

This function will return a number from 1-31 (in months that have 31 days - I'll leave it to you to work out how to handle 28,29,30)


function day()
{
var today = new Date();
return date.getdate()
}

T Irwin said:

11/23/08, 328 37 2008 2008:%i:1227454650 10:37:30

I was attempting to use the code you suggested on the page (witha few personal changes, ie image titles etc) but I cant seem to get it working, is there something I have done wrong?

~ Tirwin

G. Nowland said:

04/15/09, 105 52 2009 2009:%i:1239821569 14:52:49

This code works FANTASTICALLY!

There is only ONE PROBLEM WITH THE CODE, and it's not the fault of anyone but the website being too smart for itself.

In the code above, the website turned a couple of characters into smilies when they should be parenthesis, and when copied into your favorite HTML editor the parenthesis are now missing...

after "header" should be a ) before the ;
- ...the close parenthesis should be between the quotation mark and the semicolon...

after "+picPath+" should be a ) before the "
- ...the close parenthesis should be between the two quotation marks...

fixing this should render a completely working file!!!

Serkan Serbest said:

10/24/09, 297 18 2009 2009:%i:1256429897 20:18:17

Thank you so muck Mr. Gillespie

Andy Quick said:

11/05/09, 309 10 2009 2009:%i:1257462615 18:10:15

Hi All,

Quick alternative idea for you. IS it possible to do this with html files?

IF you made a little image and text htm file and had a few of them in a folder would be possible to pick a random one and place on site?