Markup: CSS Q: Use a different image on reload?

started by Schomer on Oct 27, 2004 — RSS Feed

Schomer Schomer
Posts: 24

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 Joe Gillespie
Posts: 528

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 Schomer
Posts: 24

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 Joe Gillespie
Posts: 528

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     <title>Random Pictures</title>
     <style type="text/css" title="text/css" media="all">
<!--
#header
{
     position: absolute;
     margin-top: 100px;
     margin-left: 100px;
     width: 468px;
     height: 60px;
     background-image: url(images/pic1.gif);
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
function swapPic()
     {
     if(document.getElementById)
                 {
                 var thePicture=document.getElementById("header";
                 var picPath="images/pic"+rnd(4)+".gif";
                 thePicture.style.background="url("+picPath+"";
                 }
     }
     
function rnd(n)
     {
     return Math.floor(Math.random() * n) + 1;
     }
     
//-->
</script>
</head>
<body onload="swapPic()">
<div id="header"></div>

</body>
</html>

Schomer Schomer
Posts: 24

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 Schomer
Posts: 24

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 Joe Gillespie
Posts: 528

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 Schomer
Posts: 24

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 Joe Gillespie
Posts: 528

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 T Irwin
Posts: 1

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

code.txt - 3.22k

G. Nowland G. Nowland
Posts: 1

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 Serkan Serbest
Posts: 1

Thank you so muck Mr. Gillespie

Andy Quick Andy Quick
Posts: 2

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?

You must login to reply