changing bgcolor onclick

mattover-matter

03-31-2003, 01:13 PM

How come this does not work?
<html>
<head>
<title> </title>
</head>
<body background="background.jpg">
<A href="#" onclick="document.bgColor='white'"> Change to white </a> <br />
</body>
</html>

and, how can I make it where it changes the backgrounds intead?

see bg1
see bg2
see bg3
see bg4

etc.

Sorry for being so "asky" today, just doing some image work and this simple script getting better of me. :o

Edited -:
I got this, but i think i am using "background" incorrectly.

<A href="javascript: document.background='background.jpg'">Change</A>

Mhtml

03-31-2003, 02:05 PM

Yeah, you almost had it.

document.body.background='bg.gif';

cheesebagpipe

03-31-2003, 07:01 PM

Yeah, you almost had it.....

<a href="javascript:document.body.style.background='url(background.jpg)'">Change</a>

<a href="javascript:document.body.style.background='white'">Change</a>

For choices:

<select onchange="document.body.style.background=options[selectedIndex].value">
<option value="url(background.jpg)">thingy</option>
<option value="green">green</option>
<option value="#9933a0">purplish</option>
</select>

mattover-matter

03-31-2003, 09:05 PM

hmmm... I am not getting this to work.

<html>
<head>
<title> </title>
</head>
<body background="background.jpg">
<a href="javascript:document.body.style.background='url(background.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background1.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background2.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background3.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background4.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background5.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background6.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background7.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background8.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background9.jpg)'">view diff</a><br />
<a href="javascript:document.body.style.background='url(background10.jpg)'">view diff</a><br />
</body>
</html>

whenever i click it just opens a whitepage saying "url("background.jpg")

I am SURE these are in the file and everything....

cheesebagpipe

03-31-2003, 09:16 PM

<html>
<head>
<title> </title>
<script type="text/javascript" language="javascript">

function setPageBG(CSS_val) {
var oBody = document.getElementsByTagName('body').item(0);
oBody.style.background = CSS_val;
}

</script>
</head>
<body background="background.jpg">
<a href="javascript:void setPageBG('url(background1.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background2.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background3.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background4.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background5.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background6.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background7.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background8.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background9.jpg)')">view diff</a><br />
<a href="javascript:void setPageBG('url(background10.jpg)')">view diff</a><br />
</body>
</html>

beetle

03-31-2003, 09:27 PM

cheesebagpipe....

If indeed all the backgrounds are named that way, why bother sending the whole style rule as a string with each function call?

function setPageBG(num) {
var oBody = document.getElementsByTagName('body').item(0);
oBody.style.background = "url(background" + num + ".jpg)";
}

<a href="javascript:void setPageBG(1)">view diff</a><br />

Or something similar?

Besides, background is the shorthand rule, backgroundImage is more appropriate :D

MichaelBowler

04-04-2005, 09:13 PM

Cant you put an Image URL in the bgColor like this <body bgcolor="image.jpg"> ???

rlemon

04-04-2005, 09:44 PM

Cant you put an Image URL in the bgColor like this <body bgcolor="image.jpg"> ???
no you cannot.

try something like this:

<html><head><title>blahcrap</title>
<style>
table.colorPalette {
width: 100px;
height: 100px;
border-collapse: border-collapse;
border: 2px solid #000000;
background-color: #ffffff;
}

table.colorPalette td {
border: 1px solid #000000;
}

#colorPalette {
position: absolute;
}
</style>
<script>
function getElement(aID){
var rv = (document.getElementById) ? document.getElementById(aID) :
document.all[aID];
return rv;
}
function setColor(VAL){
bg = getElement('body');
bg.style.background = VAL;
}
</script>
<body>
<table height="100%" width="100%" id="body"><tR><td align="centeR">Pick a Colour<br>
<table class='colorPalette' cellpadding=0 cellspacing=1><tr>
<td bgcolor="#000000" onClick="setColor('#000000')"><a style="text-decoration:none;" href="#" onClick="setColor('#000000')">     </a></td>
<td bgcolor="#00ffff" onClick="setColor('#00ffff')"><a style="text-decoration:none;" href="#" onClick="setColor('#00ffff')">     </a></td>
<td bgcolor="#0000ff" onClick="setColor('#0000ff')"><a style="text-decoration:none;" href="#" onClick="setColor('#0000ff')">     </a></td>
<td bgcolor="#ff00ff" onClick="setColor('#ff00ff')"><a style="text-decoration:none;" href="#" onClick="setColor('#ff00ff')">     </a></td>
</tr><tr>
<td bgcolor="#808080" onClick="setColor('#808080')"><a style="text-decoration:none;" href="#" onClick="setColor('#808080')">     </a></td>
<td bgcolor="#008000" onClick="setColor('#008000')"><a style="text-decoration:none;" href="#" onClick="setColor('#008000')">     </a></td>
<td bgcolor="#00ff00" onClick="setColor('#00ff00')"><a style="text-decoration:none;" href="#" onClick="setColor('#00ff00')">     </a></td>
<td bgcolor="#800000" onClick="setColor('#800000')"><a style="text-decoration:none;" href="#" onClick="setColor('#800000')">     </a></td>
</tr><tr>
<td bgcolor="#000080" onClick="setColor('#000080')"><a style="text-decoration:none;" href="#" onClick="setColor('#000080')">     </a></td>
<td bgcolor="#808000" onClick="setColor('#808000')"><a style="text-decoration:none;" href="#" onClick="setColor('#808000')">     </a></td>
<td bgcolor="#800080" onClick="setColor('#800080')"><a style="text-decoration:none;" href="#" onClick="setColor('#800080')">     </a></td>
<td bgcolor="#ff0000" onClick="setColor('#ff0000')"><a style="text-decoration:none;" href="#" onClick="setColor('#ff0000')">     </a></td>
</tr><tr>
<td bgcolor="#c0c0c0" onClick="setColor('#c0c0c0')"><a style="text-decoration:none;" href="#" onClick="setColor('#c0c0c0')">     </a></td>
<td bgcolor="#008080" onClick="setColor('#008080')"><a style="text-decoration:none;" href="#" onClick="setColor('#008080')">     </a></td>

<td bgcolor="#ffffff" onClick="setColor('#ffffff')"><a style="text-decoration:none;" href="#" onClick="setColor('#ffffff')">     </a></td>
<td bgcolor="#ffff00" onClick="setColor('#ffff00')"><a style="text-decoration:none;" href="#" onClick="setColor('#ffff00')">     </a></td>
</tr>
</table>
</td></tR></table>
</body>
</html>

MichaelBowler

04-04-2005, 10:47 PM

For changing the bgColor I have written this:
<html>
<head>

<script>
//bgcolor changing script

var bgmagic=document.all||document.getElementById

function bggo(bgcul){
if (bgmagic){
with (document){
getElementById('body').style.bgColor = bgcul;
}
}
}
</script>

</head>
<body bgColor="">

<input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
<br><br>
<a href="#" onclick="bggo('#000000');">bgcolor_changer</a>

</body>
</html>But when I click the button or the link I get a message informing me of a runtime error on line 13 saying 'object required'.
I am using frontpage so I don't have to save countless times.

So what could the problem be ??
and this script might also work with background pictures.

_Aerospace_Eng_

04-04-2005, 11:16 PM

you can either do something like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
//bgcolor changing script

var bgmagic=document.all||document.getElementById

function bggo(bgcul){
if (bgmagic){
document.getElementsByTagName('body').item(0).style.background = bgcul;
}
}
</script>

</head>
<body>

<input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
<br><br>
<a href="#" onclick="bggo('#000000');">bgcolor_changer</a>
</body>
</html>
which can be used with a background image also, you would just have to use url(yourbgimage.gif) or to get yours working, try this, i would change the id from body to something different
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
//bgcolor changing script

var bgmagic=document.all||document.getElementById

function bggo(bgcul){
if (bgmagic){
with(document){
getElementById('body1').style.background = bgcul;
}
}
}
</script>

</head>
<body id="body1">

<input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
<br><br>
<a href="#" onclick="bggo('#000000');">bgcolor_changer</a>
</body>
</html>
reason you were getting object required because there was no element that had an id of "body"

MichaelBowler

04-04-2005, 11:32 PM

JACKPOT!!!!! :) this works in Frontpage (Internet Explorer) may have to be adjusted for other browsers<html>

<head>
<script>
//bgcolor changing script

var bgmagic=document.all||document.getElementById

function bggo(bgcul){
if (bgmagic){
with (document){
document.getElementsByTagName('body').item(0).bgColor = bgcul;
}
}
}
</script>
</head>

<body bgColor>

<input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
<br><br>
<a href="#" onclick="bggo('#000000');">bgcolor_changer</a>

</body>

</html>Cheers all :)
And good luck to mattover-matter with your problem.

rlemon

04-05-2005, 04:34 AM

did i mention my code works in mozilla, IE, firefox, netscape, i'm pretty sure opera...ummm...

MichaelBowler

04-05-2005, 04:51 PM

Is it possible to apply my code to other elements ?? Like divs or table cells..

rlemon

04-05-2005, 05:53 PM

yes, yes you can!

_Aerospace_Eng_

04-05-2005, 05:57 PM

mike, you should be able to use the same script, except change body to the element you are trying to change, and i believe that the bolded part below
<script>

</script>
is how u decide which div to change the color for, it goes from top to bottom, the first div on your page should be 0 and so on. Or you can use getElementById('yourdivid') instead, and target a specific div without having to count the number that belongs to the correct div.

MichaelBowler

04-05-2005, 07:49 PM

No doesn't work oddly enough :(

l'll keep trying though.

rlemon

04-05-2005, 08:19 PM

Basscyst

04-05-2005, 09:10 PM

If you look at the JavaScript "Scripts" section i posted a GetElement function that works acrossed browsers.

if you use that you should be able to just give an ID value to all areas you wish to change then use that value...

so like

function Changebg(e){
var element = getElement('someDivTagID');
element.style.whatever = whatever;
}

That's no good because then you would have multiple elements with the same ID which is bad practice.

Something that utilizes class names would be better:

<html>
<head>
<script type="text/javascript">

function changeObj(obj,cls,col) //obj=elementname,cls=class name,col=color
{
var objs=document.getElementsByTagName(obj);
var len=objs.length;

for(var i=0;i<len;i++)
{
if(objs[i].className==cls)
{
var str=objs[i].style.background=col
}
}
}
</script>
</head>
<body onload="changeObj('div','fun','red');">
<div class="fun">
I Love JavaScript!
</div>
</body>
</html>

Basscyst