Changing Just The Table Background Color

[cjwhyte]

I have used JavaScript to change the document bgcolor of a web page and it works fine. BUT I now have my page formatted with a table about 800 pixels centered in the page. The problem is I do not wish to change the bgcolor of the whole page now but just the table. I am a novice at JavaScript, and have tried several things, including css and z-index to no avail. Here is the code I use now:

<table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000">			<tr>			  <td bgcolor="#000000"><a href="java script:void(0)" onmouseover="document.bgColor='#000000',document.fgColor='#ffffff'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#000080"><a href="java script:void(0)" onmouseover="document.bgColor='#000080',document.fgColor='#ffffff'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#0000FF"><a href="java script:void(0)" onmouseover="document.bgColor='#0000FF',document.fgColor='#ffffff'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#4B0082"><a href="java script:void(0)" onmouseover="document.bgColor='#4B0082',document.fgColor='#ffffff'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#800080"><a href="java script:void(0)" onmouseover="document.bgColor='#800080',document.fgColor='#ffffff'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#FF00FF"><a href="java script:void(0)" onmouseover="document.bgColor='#FF00FF',document.fgColor='#000000'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#00FFFF"><a href="java script:void(0)" onmouseover="document.bgColor='#00FFFF',document.fgColor='#000000'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#008080"><a href="java script:void(0)" onmouseover="document.bgColor='#008080',document.fgColor='#ffffff'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#008000"><a href="java script:void(0)" onmouseover="document.bgColor='#008000',document.fgColor='#ffffff'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#00FF00"><a href="java script:void(0)" onmouseover="document.bgColor='#00FF00',document.fgColor='#000000'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#FFFF00"><a href="java script:void(0)" onmouseover="document.bgColor='#FFFF00',document.fgColor='#000000'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#FFA500"><a href="java script:void(0)" onmouseover="document.bgColor='#FFA500',document.fgColor='#000000'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			  <td bgcolor="#FF0000"><a href="java script:void(0)" onmouseover="document.bgColor='#FF0000',document.fgColor='#000000'"><img src="../block.gif" border="0" width="25" height="25" /></a></td>			</tr></table>

Is there a way to change "document" to "table" using JavaScript? Oh the block.gif is just a 2 pixel transparent gif

[Ingolme]

You actually should completely fix up your code. The way you have it is quite messy and difficult to manage, aside from less efficient.You shouldn't use attributes to style things, that's what CSS is for. Javascript can modify the CSS of an object.You can change "document" to "table" by accessing the table element through DOM methods. The DOM (Document Object Model) is the structure of an HTML page (and of XML documents) and Javascript can use it to access every element on the page.You should read the following tutorials, and if you're still in doubt come back and ask again:CSS tutorial: http://w3schools.com/css/XML DOM tutorial: http://w3schools.com/dom/default.aspHTML DOM tutorial: http://w3schools.com/htmldom/default.asp

[cjwhyte]

You actually should completely fix up your code. The way you have it is quite messy and difficult to manage, aside from less efficient.You shouldn't use attributes to style things, that's what CSS is for. Javascript can modify the CSS of an object.You can change "document" to "table" by accessing the table element through DOM methods. The DOM (Document Object Model) is the structure of an HTML page (and of XML documents) and Javascript can use it to access every element on the page.You should read the following tutorials, and if you're still in doubt come back and ask again:CSS tutorial: http://w3schools.com/css/XML DOM tutorial: http://w3schools.com/dom/default.aspHTML DOM tutorial: http://w3schools.com/htmldom/default.asp

Thank you for replying but I really need an example of the correct code, not someone to tell me that I am a novice, I already know that, and that I have a long way to go yet. There is just so much I can learn at one time. HTML, CSS, VBscript, JavaScript, ASP, SQL, etc. etc.

[jeffman]

I didn't notice Ingolme calling you a novice. (You did that yourself.) It wouldn't matter anyway. We mostly deal with novices here, and Ingolme especially is pretty generous to them. (He hasn't made over 3000 posts on this board because he's a jerk. We're actually pretty friendly here, unlike folks on a lot of programming boards.)But Ingolme's observation was appropriate. It's not that the code you are using shows the rough edge of a novice. Rather, it's incredibly old-fashioned (circa 1996). And you do need to be told that so that you can start learning from a different place. Your first priority, I think, is unlearning a bunch of stuff. Or maybe you need to copy/paste from more current sources--like the links Ingolme showed you.A javascript technique to change the background-color of any page element looks like this:my_element = document.getElementById("my_id");my_element.style.backgroundColor = "#000000";And would work with an element tag that looks like this:<table id="my_id">Keep in mind that if your <td> elements have a background color, then the table's background may not be visible.FWIW, something tells me that this table of yours may not be necessary, and that a much simpler design is possible using different kinds of page elements and CSS. The <a> elements probably are not necessary either, since you're not actually using them as links. Rollovers can be attached to any page element. And it's been a long time since I've seen a real need for 2px transparent gifs.Generally, we are uncomfortable tweaking code that no one writes anymore.If you are interested in a simpler approach, you could explain what your larger goal is.

[dsonesuk]

not the best solution, but it works, and give you an idea what can be done.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var isset =0;function changerows(mytable,trrow,bgcolor,fgcolor){for(i=0;i<trrow.length;i++){trrow.style.backgroundColor="#"+bgcolor;trrow.style.color="#"+fgcolor;}}function changethis(specevent,bgcolor,fgcolor){var mytable = document.getElementById("mytable");var trrow = mytable.getElementsByTagName("tr");if (specevent =="mo" && isset!=1){changerows(mytable,trrow,bgcolor,fgcolor) mytable.style.backgroundColor="#"+bgcolor; mytable.style.color="#"+fgcolor;}if(specevent =="oc") { mytable.style.backgroundColor="#"+bgcolor; mytable.style.color="#"+fgcolor; changerows(mytable,trrow,bgcolor,fgcolor) if (isset == 0) { isset=1; document.getElementById("currentstate").innerHTML="Current Background Colour Set <br /> Click any coloured Icon to Change Colour option"; } else { isset=0; document.getElementById("currentstate").innerHTML="Selecting new Background Colour"; } }}/*--*//*]]>*/</script> <style type="text/css">#mytable td a {display:block; height: 25px; width:25px;}#mytable td { height: 25px; width:25px;}</style></head><body><table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="mytable" width="20%" height="20"> <tr> <td bgcolor="#000000" onmouseover="changethis('mo','000000','ffffff')" onclick="changethis('oc','000000','ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#000080" onmouseover="changethis('mo','000080','ffffff')" onclick="changethis('oc','000080','ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#0000FF" onmouseover="changethis('mo','0000FF','ffffff')" onclick="changethis('oc','0000FF','ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#4B0082" onmouseover="changethis('mo','4B0082','ffffff')" onclick="changethis('oc','4B0082','ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#800080" onmouseover="changethis('mo','800080','ffffff')" onclick="changethis('oc','800080','ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#FF00FF" onmouseover="changethis('mo','FF00FF','000000')" onclick="changethis('oc','FF00FF','000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#00FFFF" onmouseover="changethis('mo','00ffff','000000')" onclick="changethis('oc','00ffff','000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#008080" onmouseover="changethis('mo','008080','ffffff')" onclick="changethis('oc','008080','ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#008000" onmouseover="changethis('mo','008000','ffffff')" onclick="changethis('oc','008000','ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#00FF00" onmouseover="changethis('mo','00FF00','000000')" onclick="changethis('oc','00FF00','000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#FFFF00" onmouseover="changethis('mo','FFFF00','000000')" onclick="changethis('oc','FFFF00','000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#FFA500" onmouseover="changethis('mo','FFA500','000000')" onclick="changethis('oc','FFA500','000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> <td bgcolor="#FF0000" onmouseover="changethis('mo','FF0000','000000')" onclick="changethis('oc','FF0000','000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> </table><div id="currentstate"></div></body></html>

[Redroest]

Is this maybe the solution that you are looking for?

<html><head><title>test</title><script language='javascript'>function changethis(ColumnID, bgcolor){  document.getElementById(ColumnID).style.backgroundColor=bgcolor;}</script></head><body><table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="mytable" width="20%" height="20">  <tr>	<td id='column1' bgcolor="#000000" onmouseover="changethis(this.id,'ffffff')" onclick="changethis(this.id,'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column2' bgcolor="#000080" onmouseover="changethis(this.id,'ffffff')" onclick="changethis(this.id,'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column3' bgcolor="#0000FF" onmouseover="changethis(this.id,'ffffff')" onclick="changethis(this.id,'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column4' bgcolor="#4B0082" onmouseover="changethis(this.id,'ffffff')" onclick="changethis(this.id,'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column5' bgcolor="#800080" onmouseover="changethis(this.id,'ffffff')" onclick="changethis(this.id,'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column6' bgcolor="#FF00FF" onmouseover="changethis(this.id,'000000')" onclick="changethis(this.id,'000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column7' bgcolor="#00FFFF" onmouseover="changethis(this.id,'000000')" onclick="changethis(this.id,'000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column8' bgcolor="#008080" onmouseover="changethis(this.id,'ffffff')" onclick="changethis(this.id,'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column9' bgcolor="#008000" onmouseover="changethis(this.id,'ffffff')" onclick="changethis(this.id,'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column10' bgcolor="#00FF00" onmouseover="changethis(this.id,'000000')" onclick="changethis(this.id,'000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column11' bgcolor="#FFFF00" onmouseover="changethis(this.id,'000000')" onclick="changethis(this.id,'000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column12' bgcolor="#FFA500" onmouseover="changethis(this.id,'000000')" onclick="changethis(this.id,'000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td id='column13' bgcolor="#FF0000" onmouseover="changethis(this.id,'000000')" onclick="changethis(this.id,'000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>  </tr>  <tr>	<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>  </tr>  <tr>	<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>  </tr></table></body></html>

[dsonesuk]

Redroest, sorry your solution just changes the current cell, not column or the table background, which is what is required. Actually looking at again, all it changes is the background to the foreground colour, ie the color of text.

[Redroest]

Well, you can do the same with any type of tag. The script below will change the backgroundcolor of the complete table:

<html><head><title>test</title><script language='javascript'>function changethis(bgcolor){  document.getElementById("mytable").style.backgroundColor=bgcolor;}</script></head><body><table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="mytable" width="20%" height="20">  <tr>	<td bgcolor="#000000" onmouseover="changethis('ffffff')" onclick="changethis('ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#000080" onmouseover="changethis('ffffff')" onclick="changethis('ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#0000FF" onmouseover="changethis('ffffff')" onclick="changethis('ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#4B0082" onmouseover="changethis('ffffff')" onclick="changethis('ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#800080" onmouseover="changethis('ffffff')" onclick="changethis('ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#FF00FF" onmouseover="changethis('000000')" onclick="changethis('000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#00FFFF" onmouseover="changethis('000000')" onclick="changethis('000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#008080" onmouseover="changethis('ffffff')" onclick="changethis('ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#008000" onmouseover="changethis('ffffff')" onclick="changethis('ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#00FF00" onmouseover="changethis('000000')" onclick="changethis('000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#FFFF00" onmouseover="changethis('000000')" onclick="changethis('000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#FFA500" onmouseover="changethis('000000')" onclick="changethis('000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>	<td bgcolor="#FF0000" onmouseover="changethis('000000')" onclick="changethis('000000')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td>  </tr>  <tr>	<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>  </tr>  <tr>	<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>  </tr></table></body></html>

Javascript changes the style of the tag with id="mytable". In this case this is the <table> tag. You can also give this id to <tr> in order to change the background colour of one row. Same counts for the <body> tag

[dsonesuk]

yes! but it will now, change the background color of the table STILL! to text colour only??

Javascript changes the style of the tag with id="mytable". In this case this is the <table> tag. You can also give this id to <tr> in order to change the background colour of one row. Same counts for the <body> tag

Really! gosh didn't know that!, thanks! anyway better solution<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var isset =0;var mytable, tdcell;function initialisetable(){mytable = document.getElementById("mytable");tdcell = mytable.getElementsByTagName("td");for (i=0;i<tdcell.length;i++) { if(tdcell.style.backgroundColor!="") { tdcell.onclick = function(){ changethis(this,'oc');} tdcell.onmouseover = function(){ changethis(this,'mo');} } }}function changethis(thisevent,specevent){mytable = document.getElementById("mytable");var bgcolor= thisevent.style.backgroundColor;var fgcolor= thisevent.style.color;if (specevent =="mo" && isset!=1) { mytable.style.backgroundColor=bgcolor; mytable.style.color=fgcolor; }if(specevent =="oc") { mytable.style.backgroundColor=bgcolor; mytable.style.color=fgcolor; if (isset == 0) { isset=1; document.getElementById("currentstate").innerHTML="Current Background Colour Set <br /> Click any coloured Icon to Change Colour option"; } else { isset=0; document.getElementById("currentstate").innerHTML="Selecting new Background Colour"; } }}window.onload=initialisetable;/*--*//*]]>*/</script> <style type="text/css">#mytable td a {display:block; height: 25px; width:25px;}#coloroptionrow td { height: 25px; width:25px; border:1px solid #000;}#coloroptionrow img { width:25px; height:25px; border-width:0;}</style></head><body><table border="1" cellpadding="0" cellspacing="1" id="mytable" width="20%"><tr id="coloroptionrow"><td style="background-color:#000000; color:#ffffff;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#000080; color:#ffffff;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#0000ff; color:#ffffff;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#4b0082; color:#ffffff;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#800080; color:#ffffff;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#ff00ff; color:#000000;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#00ffff; color:#000000;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#008080; color:#ffffff;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#008000; color:#ffffff;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#00ff00; color:#000000;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#ffff00; color:#000000;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#ffa500; color:#000000;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td><td style="background-color:#ff0000; color:#000000;"><a href="java script:void(0)"><img src="../block.gif" alt="" /></a></td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr></table><div id="currentstate"></div></body></html>

[Redroest]

I matched my version with the one you made. I really think that I know what you mean now The code below works the same as yours (I think) but is much shorter and (I also think) its cleaner and easy to adjust:

<html><head><title>test</title><style type="text/css">#mytable td a{   display: block; 	width: 25px;	height: 25px;	border-width: 0px; }</style><script language='javascript'>function changethis(bgcolor, textcolor){  document.getElementById("mytable").bgColor=bgcolor;	document.getElementById("mytable").style.color=textcolor;}</script></head><body><table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="mytable" width="20%" height="20">  <tr>	<td bgcolor="#000000" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>	<td bgcolor="#000080" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>	<td bgcolor="#0000FF" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>	<td bgcolor="#4B0082" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>	<td bgcolor="#800080" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>	<td bgcolor="#FF00FF" onmouseover="changethis(this.bgColor, '000000')" onclick="changethis(this.bgColor, '000000')"><a href="#"></a></td>	<td bgcolor="#00FFFF" onmouseover="changethis(this.bgColor, '000000')" onclick="changethis(this.bgColor, '000000')"><a href="#"></a></td>	<td bgcolor="#008080" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>	<td bgcolor="#008000" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>	<td bgcolor="#00FF00" onmouseover="changethis(this.bgColor, '000000')" onclick="changethis(this.bgColor, '000000')"><a href="#"></a></td>	<td bgcolor="#FFFF00" onmouseover="changethis(this.bgColor, '000000')" onclick="changethis(this.bgColor, '000000')"><a href="#"></a></td>	<td bgcolor="#FFA500" onmouseover="changethis(this.bgColor, '000000')" onclick="changethis(this.bgColor, '000000')"><a href="#"></a></td>	<td bgcolor="#FF0000" onmouseover="changethis(this.bgColor, '000000')" onclick="changethis(this.bgColor, '000000')"><a href="#"></a></td>  </tr>  <tr>	<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>  </tr>  <tr>	  <td colspan="13" align='center'><strong>Test kleur van text</strong></td>  </tr>  <tr>	<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>  </tr>	</table></body></html>

[dsonesuk]

Shorter! well yes javascript is shorter, but html table with javascript within it, it is larger, and much more untidier than mine.Also my code includes a function to make the clicked colour, the colour of the background, and not change unless another coloured icon is clicked. whereas yours will change if you accidentally hover over any of the colour icons cells (very annoying to me), and shows a message state if the colour is set or not, so yes! it would be larger than yours. your table uses old attributes such as bgcolor, and bordercolor whereas css styling should be used instead.every time you need to change/add td colour, you have to look through this mess of code to change it.all you have to do with mine is add css styling of background-color, and text color, and thats it,I did consider adding these colour options for background, text color within a array and assign these at onload, so all will controlled in javascript coding, as this keep this totally separate from the html, and only need amending in script only.i'll let do that, if you want, be my guest.EDIT: Redroest, you text does not change color, reason: you have supplied colour manually 'ffffff' so you have to manually add the hash example: document.getElementById("mytable").style.color="#"+textcolor; OR include in '#ffffff'.

[Redroest]

Cool, I just learned some new things here. I did know that bgcolor is old and my script could do the same with help of document.getElementById("mytable").style.backgroundColor.I now know what your goal is with onclick, maybe when I'm bored tonight I will make the javascript version of this script so that almost no html is required

[cjwhyte]

I didn't notice Ingolme calling you a novice. (You did that yourself.) It wouldn't matter anyway. We mostly deal with novices here, and Ingolme especially is pretty generous to them. (He hasn't made over 3000 posts on this board because he's a jerk. We're actually pretty friendly here, unlike folks on a lot of programming boards.)But Ingolme's observation was appropriate. It's not that the code you are using shows the rough edge of a novice. Rather, it's incredibly old-fashioned (circa 1996). And you do need to be told that so that you can start learning from a different place. Your first priority, I think, is unlearning a bunch of stuff. Or maybe you need to copy/paste from more current sources--like the links Ingolme showed you.A javascript technique to change the background-color of any page element looks like this:my_element = document.getElementById("my_id");my_element.style.backgroundColor = "#000000";And would work with an element tag that looks like this:<table id="my_id">Keep in mind that if your <td> elements have a background color, then the table's background may not be visible.FWIW, something tells me that this table of yours may not be necessary, and that a much simpler design is possible using different kinds of page elements and CSS. The <a> elements probably are not necessary either, since you're not actually using them as links. Rollovers can be attached to any page element. And it's been a long time since I've seen a real need for 2px transparent gifs.Generally, we are uncomfortable tweaking code that no one writes anymore.If you are interested in a simpler approach, you could explain what your larger goal is.

I meant no disrespect and was not trying to be ungrateful. I use to be "into" doing web stuff around the time you mentioned (mid - late 1990's) and I have been away from it for awhile. I realize that I have to catch up but as I said I could use just an example and I will get up to speed later. I appreciate any help I can get. I am sorry if I came across in a bad way, so to speak. )

Sincerely,cjwhyte

[DimNull]

I really wish I could just show you the page and then you would know what I am talking about doing. I have tried the scripts and so far it seems I am not expressing myself clearly. I have a web page and I display transparent animations on them for anyone to use. I made this site for people who did not, or could not make animations. So I used a table with two rows, each with a different color. I made this small table with two rows and 13 columns so that the viewer could move their mouse over and change the background color of the web page. I have since formatted the web page to to fit a computer screen that is set at a resolution to view 800 pixel web sites. Now those people who have a wider resolution can see both sides of the web page outside this 777 pixels wide table. What I wanted to do was to use the small table to change the table that is 777 pixels wide and only that table. My code is a few years old and when I just had the whole page page display, document.bgcolor was fine. Now I just want the table to change color. the one script works for the bgcolor of the 777 pixel table but it does not change the text color. BTW, I changed the table ID to the 777 pixel table, and maybe that is why the text does not change?

<style type="text/css">#mytable td a{  display: block;	width: 25px;	height: 25px;	border-width: 0px;}</style><script language='javascript'>function changethis(bgcolor, textcolor){  document.getElementById("mytable").bgColor=bgcolor;	document.getElementById("mytable").style.color=textcolor;}</script><body><table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" id="mytable" width="20%" height="20">  <tr>	<td bgcolor="#000000" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="#"></a></td>

I.E., I changed it to:

<style type="text/css">}#mytable{border-width: 0px;}</style><script language='javascript'>function changethis(bgcolor,txtcolor){  document.getElementById("mytable").bgColor=bgcolor;  document.getElementById("mytable").style.color=txtColor;table.style.color=txtcolor;}</script><body><table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="777" id="mytable"><tr><td><table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" width="20%" height="20">  <tr>	<td bgcolor="#000000" onmouseover="changethis(this.bgColor, 'ffffff')" onclick="changethis(this.bgColor, 'ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td></tr></table>TEXT and IMAGES GO HERE</td><tr></table>

I hope this clears it up as to what I am trying to. The script, as I have shown it will change the large table bgcolor, and not the whole page but the text does not change.

[dsonesuk]

it maybe due to the fact you have not included the # for the text colour. the background colour passes this '#000000', but you are just passing the value of 'ffffff' instead of '#ffffff'.

[DimNull]

I tried that along with just about everything else I could think of. I really do not have to worry about this as I can add document.fgcolor in the code as I am NEVER going to write out side of the table. I just thought if we could use style for thee bgcolor of the table it would be possible to do the same with the fgcolor.

<td bgcolor='#000000' onmouseover="changethis(this.bgColor,document.fgColor='#ffffff')">

The above code will work, as long as you do not put any text outside the main table!

[dsonesuk]

The above code will work, as long as you do not put any text outside the main table!

what???????? works fine for me, mind you i did change ".style.color=txtColor;" to ".style.color=txtcolor;"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function changethis(bgcolor,txtcolor){ document.getElementById("mytable").bgColor=bgcolor; document.getElementById("mytable").style.color=txtcolor;}/*--*//*]]>*/</script> <style type="text/css">#mytable{border-width: 0px;}</style></head><body>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="777" id="mytable"><tr><td><table border="1" cellpadding="0" cellspacing="1" bordercolor="#000000" width="20%" height="20"> <tr> <td bgcolor="#000000" onmouseover="changethis(this.bgColor, '#ffffff')" onclick="changethis(this.bgColor, '#ffffff')"><a href="java script:void(0)"><img src="../block.gif" border="0" width="25" height="25" /></a></td></tr></table>TEXT and IMAGES GO HERE</td><tr></table><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html>

[DimNull]

Sorry but you are right. I guess I am having a lot of blond moments lately! )

[DimNull]

Thanks guys for all the useful information. I have been reading the tutorials on HTML and CSS. And just got done validating my site. I use to think that CSS was there if you needed it, or just wanted to use certain features, but a lot has changed in the past 6 years or so. My grats to you all that helped me with this, it has been a real eye opener.