View Full Version : getting an on click changing background to stay

11-20-2010, 01:01 AM
Hi, I used this on-click changeable background code for my website:


And now I have the same question as the original poster: is there any way to get it so that the chosen background stays put even if the page is refreshed or navigated away from? Or is it not possible because all my pages are separate files?

website is: http://mintymix.com/

I hope it's ok to post here, the other thread is from 2008.

Thanks for reading =)

Ah, I'm kind of figuring that javascript doesn't work like that. If it won't work, is there any other type of coding I may use to achieve this?

Old Pedant
11-20-2010, 01:25 AM
This is almost funny!

I just 30 minutes ago stumbled across some code I wrote in 2009 for nearly this same thing.

Look here:

And after you choose a background, look here:

Close your browser!! Completely.

Bring it up again. Hit either of those pages. Presto.

The cookie is saved for one year (that can easily be changed).

Naturally, to see the code for the two pages, just use VIEW==>>SOURCE (or Page Source) in your browser.

11-20-2010, 02:12 AM
ah! thank you so much :D I really appreciate it!
I'm going to try and implement your code into my site, I'll let you know how it comes out =) thanks again!

11-20-2010, 02:43 AM
ah ok I got it working, but I'm not sure how to switch from a form to image buttons. I tried to manipulate the form but I can't get it right, would it be ok to ask you for the code for image buttons? :o

Old Pedant
11-20-2010, 03:10 AM
You mean like this?


11-20-2010, 03:31 AM
yes, kind of like that =) But, is there a way to use a totally different image instead of the thumbnails?

Thanks again so much for all your help!

Old Pedant
11-20-2010, 03:57 AM
??? Those aren't thumbnails. The background "image" is actually made up of lots of those "tiles" side by side, top to bottom.

But I get what you mean.

Anyway, never ask "is there a way..." There almost always is. <grin/>

Give me an example of what you are after. How can an image button be anything *but* a small representation of the actual background? In other words, one way or the other you need a thumbnail.

11-20-2010, 04:32 AM
ah thank you =)

ohh, I think I misused the word thumbnail. What I'd like to have is a set up like how it is on my website at the moment:


At the top right, the 6 colored tabs are the click-able images that change the background. (example image: http://cha-lualovers.com/whops/bgs/orange.gif ) But the code I'm using now doesn't have cookies like yours, and I prefer your code better. Just need to figure out how to change your click-able images to be individual, unique src images different from the background that it will display (I hope I'm wording this right, ah I'm sorry if its confusing).

Old Pedant
11-20-2010, 08:11 AM
Your HTML on that page is illegal. Maybe you should run it by an HTML verifier and fix it????

For example, you start off with

<div align="center">
<td height="50" align="center">

You can't have a <td> *except* inside a <tr> which is inside a <table>.

And then you have this:

<td height="50" align="center"><font color="000000">

No, you can't have ANYTHING except a <td> or <th> directly inside of a <tr>.


Anyway, here:

<link href="http://mintymix.com/enc/stylecss.php" rel="stylesheet"


<body background="http://mintymix.com/images/table.jpg">

<script type="text/javascript">
var backImage = new Array();
backImage[0] = "http://cha-lualovers.com/whops/bgs/wafflebg.jpg";
backImage[1] = "http://mintymix.com/images/behbefuhstrawb.gif";
backImage[2] = "http://i50.tinypic.com/2yy6pus.gif";
backImage[3] = "http://mintymix.com/images/table2.jpg";
backImage[4] = "http://mintymix.com/images/waffline.jpg";
backImage[5] = "http://mintymix.com/images/table.jpg";

var expDays = 365; // how long before cookie expires, by default
var exp = new Date();
var favImage = "";
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function changeBGImage(which)
SetCookie('image', backImage[which], exp);
getBodyBG( );

function GetCookie(name)
var cookies = document.cookie.split(/; /g);
var arg = name + "=";
for ( var c = 0; c < cookies.length; ++c )
var ck = cookies[c];
if ( ck.indexOf(arg) == 0 )
var temp = ck.split(/=/);
return unescape(temp[1]);
return "";

function SetCookie (name, value)
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;

document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");

function getBodyBG()
var bgi = GetCookie("image");
if ( bgi == null || bgi == "" ) bgi = backImage[0];
document.body.style.backgroundImage="url('" + bgi + "')";

body { background-repeat: repeat-all; }

td#buttons {
width: 100%;
text-align: right;
height: 10px;
td#buttons input {
border: none;
margin-left: 5px;

<body onload="getBodyBG();">
<table width="980" height="387" border="0" align="center" cellpadding="0" cellspacing="0"
<td><div align="left"><img src="http://cha-lualovers.com/whops/logo.png"></td>
<table width="653" height="100" border="0" cellpadding="0" cellspacing="0">
<td height="10" align="right" id="buttons">
<input type="image" src="http://cha-lualovers.com/whops/bgs/wafbg.gif" onclick="changeBGImage(0)">
<input type="image" src="http://cha-lualovers.com/whops/bgs/orange.gif" onclick="changeBGImage(1)">
<input type="image" src="http://cha-lualovers.com/whops/bgs/yellow.gif" onclick="changeBGImage(2)">
<input type="image" src="http://cha-lualovers.com/whops/bgs/green.gif" onclick="changeBGImage(3)">
<input type="image" src="http://cha-lualovers.com/whops/bgs/blue.gif" onclick="changeBGImage(4)">
<input type="image" src="http://cha-lualovers.com/whops/bgs/tablbg.gif" onclick="changeBGImage(5)">
<td width="45"></td>

11-20-2010, 08:20 AM
eek, thank you so much!

I used a template and tried to alter it for my layout without much knowledge of tables so it's very messy.. I will definitely use an HTML verifier to fix it, thank you for referring me to that! I didn't even know they existed. :confused:

Also one more thing, with your code am I able to start off with a background image, or does it have to be white at the beginning?

Thanks again for all your help! I hope I wasn't an annoyance with my limited coding knowledge.

*edit* ah wait I think now the new code has the background starting off with the first image, correct? that is perfect =)

Old Pedant
11-20-2010, 08:31 AM
Ummm...that code checks for a lack of cookie, and if it's not there, chooses background 0 as the default.

Hmmm... At least it should do that.

Let me check.

Yeah, it did it. Only thing wrong is that it starts to show another background first. Not sure where that is coming from.

Oh, I see it! There are two <body> tags in there! More illegal HTML.

This one:
<body background="http://mintymix.com/images/table.jpg">
is bogus.

If you WANT that to be the default image, keep this *RIGHT* <body> tag:

<body onload="getBodyBG();">

And change the style from

body { background-repeat: repeat-all; }


body {
background-repeat: repeat-all;
background-image: url('http://mintymix.com/images/table.jpg');

and then change this line:

if ( bgi == null || bgi == "" ) bgi = backImage[0];
to this:

if ( bgi == null || bgi == "" ) bgi = backImage[5];

11-20-2010, 10:07 AM
got it =)

When I changed this, it started to flicker the default though, so I just kept it as the original and it's working fine:

body {
background-repeat: repeat-all;
background-image: url('http://mintymix.com/images/table.jpg');

Sometimes the backgrounds are getting stuck though, if you poke around you might be able to see what I mean.

And ah, I used the verifier and it looks like I have a lot to work on in the morning, lol.

thanks for all your help :thumbsup:
if you want me to credit you in the code or on my site, let me know =)

Old Pedant
11-20-2010, 09:45 PM
Fix up the HTML then we'll take another look at the flickering etc.