Swapping background images on browser refresh.

I am in need of a javascript that sets a cookie which enables a background image to change everytime refresh is used.  Also I would like to make the cookie timed so that the background image would change for a couple days if the user returned to the site in the time period.

I have seen a script in a question on this site (http://www.experts-exchange.com/Web/Q_20744767.html?query=swap+background&topics=96) that I thought would work, however it has some other image function in it that I don't want.  I tried to remove the stuff that I didn't want but I couldn't get it to work.

I tried writing my own cookie with "document.cookie", but haven't learned enough about JS yet to know how to check for it and have something else executed if the cookie is present...

If there is a better way to this without using a cookie, let me know that too.

Thanks for all your help in advance.
kearnguyAsked:
Who is Participating?
 
hemebondConnect With a Mentor Commented:
"Also I would like to make the cookie timed so that the background image would change for a couple days if the user returned to the site in the time period." I took this to mean you wanted the image to remain the same for a certain duration. Otherwise the whole sentence makes absolutely no sense.

This code will change the background image on every refresh:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Q_21160225</title>
      </head>
      <body>
      </body>
      <script type="text/javascript">
            var list = new Array("/images/1.jpeg","/images/2.jpeg","/images/3.jpeg");
            if(list.length)
            {
                  i = Math.round(Math.random() * (list.length - 1));
                  document.getElementsByTagName('body')[0].style.backgroundImage = 'url("' + list[i] + '")';
            }
      </script>
</html>
0
 
kearnguyAuthor Commented:
Maybe an increase of points will encourage an answer :)
0
 
hemebondCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Q_21160225</title>
      </head>
      <body>
      </body>
      <script type="text/javascript">
            var list = new Array("/images/1.jpeg","/images/2.jpeg","/images/3.jpeg");

            var bg = (document.cookie == '') ? null : document.cookie.split(';');
            if(bg)
            {
                  bg = bg[0].split('=');
            }

            var expiry_date = new Date();
            expiry_date.setMonth((expiry_date.getMonth() + 1));

            if(list.length)
            {
                  i = (bg) ? bg[1] : Math.round(Math.random() * (list.length - 1));
                  document.getElementsByTagName('body')[0].style.backgroundImage = 'url("' + list[i] + '")';
                  document.cookie = "bg=" + i + ";expires=" + expiry_date.toGMTString();
            }
      </script>
</html>
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
kearnguyAuthor Commented:
The above code successfully loads the first image as the background, but nothing happens when I refresh the page or go back to it later on.  The background image stays the same.

Am I doing something wrong?  All I did different was change the pic array path to:
   
   var list = new Array("one.gif","two.gif","three.gif");

...since the pictures and the HTML file are in the same folder.
0
 
kearnguyAuthor Commented:
What I meant was...

A cookie would be placed that would expire after a few days.  During the few days that the cookie is active, a user could return to the site and see a different background than the background that was loaded when they left.

My apologies if my less-than-great grammer confused you...I was in a hurry when I typed the original post and couldn't figure out an easy way to say what I needed to.  

This works fine though.  I'll try to figure out the expiry thing myself - what you gave me is what I really needed.  Points go to you.  

However, for future reference, allow me to gently bring something to your attention concerning communication with people less knowledgable than yourself.  Some people might take offense to someone telling them that they make "absolutely no sense" (specially when they are humble enough to ask for help in the first place).  A better approach might be to just ask for clarification.

Thanks again.
0
 
hemebondCommented:
Then explain this to me. What happens when the cookie expires?
0
 
kearnguyAuthor Commented:
If the cookie expires and the user returns to the site, a new cookie is placed, and the cycle starts all over again.  For example:

On the particular site in question, the traffic patterns indicate that each user visit the site roughly 8 times in a one week period.  If the background cookie was set for 1 month the user could come back to the site for the entire month without ever seeing the same background image (provided I had close to 40 images in the array).  At the end of the month the cookie would expire and when the user comes back, they would start back at the top of the array of background images.

Hopefully that helps explain things.
0
 
hemebondCommented:
It does explain things. It also means the script I gave you is not entirely correct.
0
 
kearnguyAuthor Commented:
Well,  your script did help quite a bit.  I couldn't even get the ones I was trying to swap the images.

If you would like to help me figure it out though by expanding on your answer, I will post a new topic and dish out some more points.  Otherwise I'll keep cracking away solo until I figure something out.

Let me know if you are interested in still working on this issue.
0
 
hemebondCommented:
This will cycle through all available images. I don't see any reason to have it expire after a month. It'll go to the end of the list, and then start again. Ideally you should be doing this stuff server-side.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
      <head>
            <title>Q_21160225</title>
      </head>
      <body>
      </body>
      <script type="text/javascript">
            var list = new Array("/images/1.jpeg","/images/2.jpeg","/images/3.jpeg");
            var i = 0;

            var bg = (document.cookie == '') ? null : document.cookie.split(';');
            if(bg)
            {
                  bg = bg[0].split('=');
                  i = Number(bg[1]) + 1;
            }

            if(i >= list.length)
            {
                  i = 0;
            }
            document.getElementsByTagName('body')[0].style.backgroundImage = 'url("' + list[i] + '")';
            document.cookie = "bg=" + i;
      </script>
</html>

Keep the points.
0
All Courses

From novice to tech pro — start learning today.