Chatbox

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 JS BG-Color Changer on 10/4/2012, 3:32 pm

Vanilla990

avatar

Administrator

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

View user profile

2 Re: JS BG-Color Changer on 15/4/2012, 2:06 pm

grimofdoom

avatar

Member
is it interchangeable with images?

View user profile

3 Re: JS BG-Color Changer on 15/4/2012, 3:03 pm

Vanilla990

avatar

Administrator
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.

View user profile

4 Re: JS BG-Color Changer on 15/4/2012, 4:57 pm

LGforum

avatar

Moderator
Just change this line:
document.bgColor = color;

To this:
document.body.style.backgroundImage = 'url('+color+')';

View user profile

5 Re: JS BG-Color Changer on 15/4/2012, 5:13 pm

grimofdoom

avatar

Member
So do i change the onmouseover to onleftclick?

View user profile

6 Re: JS BG-Color Changer on 15/4/2012, 5:16 pm

Vanilla990

avatar

Administrator
Change the "OnMouseClick" to "OnClick". Web browsers only allow left click for main functions, right click is always options etc.

View user profile

7 Re: JS BG-Color Changer on 15/4/2012, 5:25 pm

grimofdoom

avatar

Member
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

View user profile

8 Re: JS BG-Color Changer on 15/4/2012, 5:54 pm

Vanilla990

avatar

Administrator
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, 6:02 pm; edited 1 time in total

View user profile

9 Re: JS BG-Color Changer on 15/4/2012, 6:01 pm

grimofdoom

avatar

Member
i forgot to change the javascript portion.though what would i put to save the background change until changed again?

View user profile

10 Re: JS BG-Color Changer on 16/4/2012, 3:32 pm

LGforum

avatar

Moderator
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.

View user profile

11 Re: JS BG-Color Changer on 16/4/2012, 4:49 pm

grimofdoom

avatar

Member
thanks...sorry if this annoys you...im more educated in html/css.

View user profile

12 Re: JS BG-Color Changer on 25/4/2012, 7:21 am

Niko

avatar

Member
A demo? Smile

View user profile http://www.fmcodes.com

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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