PDA

Click to See Complete Forum and Search --> : change table bg color

HackerX
07-17-2003, 01:16 PM
I have a piece of Java Script that changes the background color but I want it to only change the table bg color. and I also want to change the links color so i doesnt turn purple after clicked on.

heres the <HEAD>

<SCRIPT LANGUAGE="JavaScript">

var backColor = new Array(); // don't change this

// Enter the colors you wish to use. Follow the
// pattern to use more colors. The number in the
// brackets [] is the number you will use in the
// function call to pick each color.

backColor[0] = 'BLUE';

// Do not edit below this line.

function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
// End -->
</script>

And here is the Table in the <BODY>

<table width="100%" border="1">

<tr>
<td bgcolor="black"><div align="center"><font color="silver">6/17/03</font></div></td>
</tr>
<tr>
<td bgcolor="black"><center><font color="silver">Adding Free JavaScript section, plus submitted sites to search engines after installing No IE6 Image Tool Bar and No Right Click Script with source encryption.</font></center></td>
</tr>

<tr>
<td bgcolor="silver"><div align="center"><font color="silver"><a href="#" onMouseOver="javascript:changeBG(0)" font color="silver">Change by placing mouse over link</a></font></div></td>
</tr>

<tr>
<td bgcolor="black"><div align="center"><font color="silver">6/16/03</font></div></td>
</tr>
<tr>
<td bgcolor="black"><center><font color="silver">Site Up</font></center></td>
</tr>

<tr>
<td bgcolor="silver"><div align="center"><font color="silver"><a href="#" onMouseOver="javascript:changeBG(0)" font color="silver">Change by placing mouse over link</a></font></div></td>
</tr>
</table>
requestcode
07-17-2003, 01:29 PM
Something like this:
<html>
<head>
<title>Table Cell and Link Color Change</title>
<script language="JavaScript">
function chgtxt(obj,linkid,cellcolor,linkcolor)
{
if(document.getElementById) // IE5+ and NS6+ only
{
document.getElementById(obj.id).style.backgroundColor=cellcolor
document.getElementById(linkid).style.color=linkcolor
}
}
</script>
<style>
.tabClass {background-color:blue;}
.lnkClass {color:white;font-weight:bold;font-size:10pt;font-face:Arial;text-decoration:none}
</style>
</head>
<body>
<table align="center" border="1" width="300" height="20" cellspacing="0" cellpadding="0">
<tr>
<td id="td1" onClick="location.href='page1.html'" class="tabClass" align="center" valign="middle" onmouseover="chgtxt(this,'link0','white','blue')" onmouseout="chgtxt(this,'link0','blue','white')">
<a href="page1.html" id="link0" class="lnkClass">Click Me</a>
</td>
<td id="td2" onClick="location.href='page2.html'" class="tabClass" align="center" valign="middle" onmouseover="chgtxt(this,'link1','white','blue')" onmouseout="chgtxt(this,'link1','blue','white')">
<a href="page2.html" id="link1" class="lnkClass">Click Me</a>
</td>
</tr>
</table>
</body>
</html>
angrytuna
07-17-2003, 01:47 PM
In the same fashion, you can use the "this" keyword:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

var backColor = new Array(); // don't change this

// Enter the colors you wish to use. Follow the
// pattern to use more colors. The number in the
// brackets [] is the number you will use in the
// function call to pick each color.

backColor[0] = 'BLUE';
backColor[1] = 'SILVER';

// Do not edit below this line.

function changeBG(obj,whichColor){
obj.bgColor = backColor[whichColor];
}
// End -->
</script>

<BODY>

<table width="100%" border="1">

<tr>
<td bgcolor="black"><div align="center"><font color="silver">6/17/03</font></div></td>
</tr>
<tr>
<td bgcolor="black"><center><font color="silver">Adding Free JavaScript section, plus submitted sites to search engines after installing No IE6 Image Tool Bar and No Right Click Script with source encryption.</font></center></td>
</tr>

<tr>
<td bgcolor="silver" onMouseOver="javascript:changeBG(this,0)" onMouseOut="javascript:changeBG(this,1)"><div align="center"><font color="silver">Change by placing mouse over link</font></div></td>
</tr>

<tr>
<td bgcolor="black"><div align="center"><font color="silver">6/16/03</font></div></td>
</tr>
<tr>
<td bgcolor="black"><center><font color="silver">Site Up</font></center></td>
</tr>

<tr>
<td bgcolor="silver" onMouseOver="javascript:changeBG(this,0)" onMouseOut="javascript:changeBG(this,1)"><div align="center"><font color="silver" >Change by placing mouse over link</a></font></div></td>
</tr>
</table>
Admittedly, this changes on mouseover of the cell, not the link, but maybe it helps?
HackerX
07-17-2003, 01:52 PM
thanx Request code! I changed it quite a bit to fit what I needed it for but it works now. http://www.zonewebdesign.tk enter the site and scroll over the blue/gray spaces in the news and they change. I wanted this to go along with my scrollover top image(scroll over the image at the top) or the menu(scroll over the menu).


thx again,

~HackerX~