Javascript change background colour onclick and save

**city_coder** · 02-28-2008, 12:17 PM

Hi, I'm not too sure if this is truely a JS thing or a bit of CSS aswell.
Heres my quandry.

I'm currently just playing around with JS, loving it so far.
Came up with the idea(or sort of saw it on the radio1 website at www.bbc.co.uk/radio1).

This is where the user is able to click on the small icon and it will load in the background image of that icon, once that image has been loaded in, it shows the next option in the array.

To be honest im new to JS so i'd like to keep this as simple as possible.

My main whole aim is to let the user choose the colour of the background image, give them a preview by rolling over it and then if they click on it then it will save it(this is where CSS comes in?)

If anybody can point in the right direction then that would be very helpful, although you may have to have a long arm because im very new to JS and CSS really.

Thanks alot in advance

**Nile** · 02-29-2008, 12:11 AM

Try this:

Code:

<body onLoad="set_it()">

<script type="text/javascript">
function preview(hex){
	document.body.style.background=hex;
}
function preview_o(){
		document.body.style.background='#ffffff';
}
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name;expires="+exdate.toGMTString());

var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
var bg_color = getCookie('bgkkl');
function set_it(){
document.body.style.background=bg_color;
}
</script>
<a href="" onMouseover="preview('#0000ff')" onMouseout="preview_o()" onClick="setCookie('bgkkl','#0000ff','3600')">Change</a>
</body>

**city_coder** · 02-29-2008, 09:31 AM

Hi Nile, thanks for replying.
Just 1 question to start with? Is the code just ready to go straight in? Because when i put it in, it didnt seem to do anything.

So i went about trying to understand it as best as i could. I use dreamweaver and found that apparently there were a few more quotes that needed??

Also will it affect the code if i have other javascript that may affect the background colour?

After i had checked it best i could, i went to see what was actually happening and i also found that there is no cookie being set.

Any help would be great, i am really new to javascript.

**rangana** · 02-29-2008, 09:50 AM

....or maybe something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<SCRIPT type="text/javascript">
<!--
function bgChange(bgVal)
{
  newColor = bgVal.options[bgVal.selectedIndex].text;
  document.bgColor = newColor;
  bgVal.selectedIndex = -1;
}

//-->
</SCRIPT>
<BODY STYLE="font-family:Tahoma;font-size:10pt;">
<div style="border:2px solid #fff; width:300px;text-align:center;">
<B>Changing Background Colors</B>
<BR>
 <FORM style="padding:10px;">
   <SELECT SIZE="8" onChange="bgChange(this);">
   <OPTION>Red</option>
   <OPTION>Orange</option>
   <OPTION>Yellow</option>
   <OPTION>Green</option>
   <OPTION>Blue</option>
   <OPTION>Indigo</option>
   <OPTION>Violet</option>
   <OPTION>White</option>
   </SELECT>
 </FORM>
</BODY>
</HTML>

See if it helps

**city_coder** · 02-29-2008, 10:17 AM

Rangana you are an absolute legend, it worked first time like a dream!

Ok if you dont mind helping me again, how would i go about saving that colour to a cookie using javascript? so that when the user revisits it is kept for next time.

Also say i were to modify your code so that its not a option list, and a little img of the colour and said something like

Code:

<a href="#" onClick="bgChange(this);"><img src="red_colour.jpg" title="red" name="red"></a>

If that would work then that would be great, or if im missing something then you could show me.

Thanks

**rangana** · 03-01-2008, 02:03 AM

So, you want the color be remembered in the cookie.

Maybe this link might help

**city_coder** · 03-04-2008, 01:10 PM

Hi rangana, just a question. How would i go about making the code that im using(yours) use the value of the option instead of just the text inbetween eg

Code:

 
//javascript before head
function bgChange(bgVal)
{
  newColor = bgVal.options[bgVal.selectedIndex].text;
  document.bgColor = newColor;
  bgVal.selectedIndex = -1;
}
//html
<form>
<select onChange="bgChange(this);">
   <option>Choose a colour</option>
   <option value="#6699CC">Blue</option>
   <option>Orange</option>
   <option>Yellow</option>
   <option>Green</option>
   <option>Red</option>
   <option>Indigo</option>
   <option>Violet</option>
   <option>White</option>
</SELECT>

would it be a slight change to the javascript i take it?

**rangana** · 03-05-2008, 12:14 AM

Yes, you're right, there will be a slight change. Change the code to:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT type="text/javascript">
<!--
function bgChange()
{
  newColor = document.colorme.selection.value;
  document.bgColor = newColor;
}

//-->
</SCRIPT>
</HEAD>
<BODY STYLE="font-family:Tahoma;font-size:10pt;">
<div style="border:2px solid #fff; width:300px;text-align:center;">
<B>Changing Background Colors</B>
<BR>
 <FORM name="colorme" style="padding:10px;">
   <SELECT SIZE="7" name="selection" onChange="bgChange()">
   <OPTION value="#6699cc">Blue</option>
   <OPTION value="orange">Orange</option>
   <OPTION value="yellow">Yellow</option>
   <OPTION value="#00ff00">Green</option>
   <OPTION value="indigo">Indigo</option>
   <OPTION value="violet">Violet</option>
   <OPTION value="#ffffff" selected>White</option>
   </SELECT>
 </FORM>
</BODY>
</HTML>

See if it helps

Thread: Javascript change background colour onclick and save

Thread Tools

Search Thread

Javascript change background colour onclick and save

The Following User Says Thank You to rangana For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions