JS BG-Color Changer

View previous topic View next topic Go down

avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 10/4/2012, 1:32 pm


JavaScript Background Color Changer




Hello everyone,

Welcome to my simple tutorial on how to change the background color of a HTML page using some simple JavaScript.

This tutorial contains some easy to follow steps below. If you have any problems following the tutorial, post a comment below and I will be more than happy to help you out.




Step 1: Setting up a HTML page

First you will need to start a new HTML page. This can either be in a simple text editor or in professional web software.

Make sure it contains the html, header and body tags.

Here is the basic code in case anyone is unsure on how the tags are supposed to be:
Code:

<html>
<head>
</head>
<body>
</body>
</html>

Step 2: Adding the JavaScript

You will need to add the following code somewhere between the header tags in the file.

Code:

<script language="JavaScript">
<!--
function changeBGC(color){
document.bgColor = color;
}
//-->
</script>

This piece of JavaScript code simply changes the background color depending on the color chosen. The "color" variable and how the code changes the background color will become clearer in the next step.

Step 3: Adding the html code

There are several ways you can set up the code but I have decided to use a few divs to align the boxes that will change the color.

You will need to add the following code in the body tags in the the file.

Code:

<div id="colorchanger">      
   <a href="#" onMouseOver="javascript:changeBGC('#FFFFCC')"><div class="color-box" style="background-color:#FFFFCC;"></div></a>
   <a href="#" onMouseOver="javascript:changeBGC('#CCFFFF')"><div class="color-box" style="background-color:#CCFFFF;"></div></a>
   <a href="#" onMouseOver="javascript:changeBGC('#CCFFCC')"><div class="color-box" style="background-color:#CCFFCC;"></div></a>
</div>

With this code, when you hover your mouse over the boxes, the background color will change. You could change this so that when you click on the boxes the color is changed simply by replacing "OnMouseOver" with "OnClick".

If you want to change the colors available then make sure you change the both the JavaScript value and the style color so they are the same for each box.

Step 4: Adding the css code

Because I used a few bits of css to set up the boxes and place them on the page there is a small amount of css code that needs to be added.

You will need to add the following code somewhere in the header tag in the file.

Code:

<style type="text/css">
#colorchanger {height:50px;}
.color-box {
height:20px; width:20px;
border:1px solid black;
display: inline-block;
}
</style>




For anyone that would like a complete copy of the code all together, please check the spoiler underneath this text.

Spoiler:

Code:

<html>
<head>
<style type="text/css">
#colorchanger {
height:50px;
}
.color-box {
height:20px;
width:20px;
border:1px solid #000000;
display: inline-block;
}
</style>
<script language="JavaScript">
<!--
function changeBGC(color){
document.bgColor = color;
}
//-->
</script>
</head>
<body>
<div id="colorchanger">      
   <a href="#" onMouseOver="javascript:changeBGC('#FFFFCC')"><div class="color-box" style="background-color:#FFFFCC;"></div></a>
   <a href="#" onMouseOver="javascript:changeBGC('#CCFFFF')"><div class="color-box" style="background-color:#CCFFFF;"></div></a>
   <a href="#" onMouseOver="javascript:changeBGC('#CCFFCC')"><div class="color-box" style="background-color:#CCFFCC;"></div></a>
</div>
</body>
</html>




Congratulations, you have now completed this tutorial and should have a fully functioning background color changer on a html page.

If you have any questions please post them below and I will try to reply back to them as soon as I can.




Tutorial by: Vanilla990
Created for: CodingHelp.org

avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 15/4/2012, 12:06 pm

is it interchangeable with images?
avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 15/4/2012, 1:03 pm

Good Question. I haven't tried. If you give me an hour or so I will try it for you and see if it works.

Edit: After having tried a few alterations to the code, I can't seem to get it to work. I'll try a few more ideas later and see if it works.
avatar
LGforum
Moderator
Forum Posts : 77
Member Since : 2011-11-12
View user profile

PostLGforum on 15/4/2012, 2:57 pm

Just change this line:
document.bgColor = color;

To this:
document.body.style.backgroundImage = 'url('+color+')';
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 15/4/2012, 3:13 pm

So do i change the onmouseover to onleftclick?
avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 15/4/2012, 3:16 pm

Change the "OnMouseClick" to "OnClick". Web browsers only allow left click for main functions, right click is always options etc.
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 15/4/2012, 3:25 pm

Sorry,one last question.What script for cookies would i put and were to save it forver(or until background changed) and also i change the document thing like lgforum said and then changed the body peice to
Code:
<div id="colorchanger">     
  <a href="#" onClick="javascript:changeIMG('http://i42.tinypic.com/2nksw3k.png')"><div class="color-box" style="background-image:url('http://i42.tinypic.com/2nksw3k.png');"></div></a><br>
  <a href="#" onClick="javascript:changeimg('http://i42.tinypic.com/2nksw3k.png')"><div class="color-box" style="background-image:url('http://i42.tinypic.com/2nksw3k.png');"></div></a><br>
  <a href="#" onClick="javascript:changeimg('http://i42.tinypic.com/2nksw3k.png')"><div class="color-box" style="background-image:url('http://i42.tinypic.com/2nksw3k.png');"></div></a>
</div>
but it doesnt change
avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 15/4/2012, 3:54 pm

For your functions you have called them "changeimg" and "changeIMG". If you have changed these have you also changed the name of the function name in the javascript code section? Also, not 100% sure but for the benefit of following proper code structure, either use capitals for everything or don't as it could cause problems.

I have no experience with adding cookies to save data. This tutorial is simply just to show people how to set it up. I suggest you wait for an answer on the thread you already have about the situation.

Edit:

I kept the functions with the same name and instead of putting the image icon in the boxes I put a number instead but the code below works. The first one will change the image when clicked and the last one will reset the background back to white.

Code:

<html>
<head>
<style type="text/css">
#colorchanger {
height:50px;
}
.color-box {
height:20px;
width:20px;
border:1px solid #000000;
display: inline-block;
}
</style>
<script language="JavaScript">
<!--
function changeBGC(color){
document.body.style.backgroundImage = 'url('+color+')';
}
//-->
</script>
</head>
<body>
<div id="colorchanger">     
  <a href="#" onClick="javascript:changeBGC('http://i42.tinypic.com/2nksw3k.png')"><div class="color-box" style="background-color:#FFFFCC;">1</div></a>
  <a href="#" onClick="javascript:changeBGC('none')"><div class="color-box" style="background-color:#CCFFCC;">2</div></a>
</div>
</body>
</html>

Thanks to LG for providing me with the javascript function needed to change images. That was the part I was having trouble with Smile


Last edited by Vanilla990 on 15/4/2012, 4:02 pm; edited 1 time in total
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 15/4/2012, 4:01 pm

i forgot to change the javascript portion.though what would i put to save the background change until changed again?
avatar
LGforum
Moderator
Forum Posts : 77
Member Since : 2011-11-12
View user profile

PostLGforum on 16/4/2012, 1:32 pm

Well here is the functions I provided you for handling cookies:
Code:

function getcookie(name) {
    cname = name + '=';
    cpos = document.cookie.indexOf(cname);
    if (cpos != -1) {
        cstart = cpos + cname.length;
        cend = document.cookie.indexOf(';',cstart);
        return unescape(document.cookie.substring(cstart,cend));
    }
    else {return null;}
}

function setcookie(name,value,sticky) {
    expires = '';
    if (sticky) {expires = ' expires=Wed, 1 Jan 2018 00:00:00 GMT;';}
    document.cookie = name + "=" + value + '; path=/;' + expires;
}

Here's a full HTML code:


Code:

<html>
<head>
<style type="text/css">
#colorchanger {
height:50px;
}
.color-box {
height:20px;
width:20px;
border:1px solid #000000;
display: inline-block;
}
</style>
<script language="JavaScript">
<!--
function changeBGC(color){
  document.body.style.backgroundImage = 'url('+color+')';
  setcookie('bgimg',color,true);
}
function getcookie(name) {
    cname = name + '=';
    cpos = document.cookie.indexOf(cname);
    if (cpos != -1) {
        cstart = cpos + cname.length;
        cend = document.cookie.indexOf(';',cstart);
        return unescape(document.cookie.substring(cstart,cend));
    }
    else {return null;}
}

function setcookie(name,value,sticky) {
    expires = '';
    if (sticky) {expires = ' expires=Wed, 1 Jan 2018 00:00:00 GMT;';}
    document.cookie = name + "=" + value + '; path=/;' + expires;
}
//-->
</script>
</head>
<body>
<script>
if(getcookie('bgimg')) changeBGC(getcookie('bgimg'));
</script>
<div id="colorchanger">   
  <a href="javascript:changeBGC('http://i42.tinypic.com/2nksw3k.png')"><div class="color-box" style="background-color:#FFFFCC;">1</div></a>
  <a href="javascript:changeBGC('none')"><div class="color-box" style="background-color:#CCFFCC;">2</div></a>
</div>
</body>
</html>

I don't normally like just handing out code really. So here's the explanation for educational purposes:
- There are two functions added, one for setting cookies, one for getting.
- the changeBGC function has been changed to set a cookie.
- When the page loads, and the body is ready, it checks if there is a cookie set and if so it sets it using the changeBGC function.
avatar
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06
View user profile

Postgrimofdoom on 16/4/2012, 2:49 pm

thanks...sorry if this annoys you...im more educated in html/css.
avatar
Niko
Member
Member
Forum Posts : 20
Member Since : 2012-03-24
View user profile http://www.fmcodes.com

PostNiko on 25/4/2012, 5:21 am

A demo? Smile
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum