Dynamically Changing BGColor of "TD"

I have something that goes into that at:
http://www.pageresource.com/dhtml/jtut6.htm

Bad news is I've been told it only works on one cell, I may have to try and go back to the drawing board on it.

Hope it helps some though.

Visit http://www.westciv.com/style_master/academy/css_tutorial/index.html

Excellent tutorial and everything you want to know about CSS and you can download their CSS editor to create any mouseover effects with the code automatically.

Hope this helps.

Just a note: based on my experiences, the dynamic td bgcolor changing only works in IE 4 and above.

------------------
R Smith
The XRS Network
http://xrs.net/ | | [email protected]

Hi,

Someone named "Honnen..." in the alt.javascript newsgroup has a 4/5 function script that works with NN4. (if I find his link, I'll post it) It involves initializing each cell and capturing events with the onLoad.
In contrast, IE is simple -- define divs and document.all.divID.style.bgColor = myColor;

Vinny

------------------
my site:GrassBlade: cut&paste javascript
moderator at:The Javascript Place
Javascript City

It seems rather inefficient to use CSS or layers and DHTML for something this simple, doesn't it? Can't you just use a simple javascript?

Sincerely,

Vladislav Davidzon <[email protected]>
Web hosting from $7/mo, domains for $15/year!
ThinkHost.Com Web Hosting Services http://www.thinkhost.com

Royalt,

Here's an example of code that uses mouseovers to change the background color of table cells. You can expand it to use for as many table cells as you like. It will work with both IE and NS. Hope this helps.

Bob
*******************************************
<table cellspacing=0 cellpadding=0 border=yes>
<tr>
<td width=250 style="background-color:lightblue" align=left onMouseOver="this.style.backgroundColor='blue';" onMouseOut="this.style.backgroundColor='lightblue';">
<ilayer>
<layer ID="1a2" bgColor="lightblue" width="100%"
onMouseover="this.bgColor='blue';" onMouseOut="this.bgColor='lightblue';">
table entry one
</layer></ilayer></td>
</tr>
<tr>
<td width=250 style="background-color:lightblue" align=left onMouseOver="this.style.backgroundColor='blue';" onMouseOut="this.style.backgroundColor='lightblue';">
<ilayer>
<layer ID="1a2" bgColor="lightblue" width="100%"
onMouseover="this.bgColor='blue';" onMouseOut="this.bgColor='lightblue';">
table entry two
</layer></ilayer></td>
</tr>
<tr>
<td width=250 style="background-color:lightblue" align=left onMouseOver="this.style.backgroundColor='blue';" onMouseOut="this.style.backgroundColor='lightblue';">
<ilayer>
<layer ID="1a2" bgColor="lightblue" width="100%"
onMouseover="this.bgColor='blue';" onMouseOut="this.bgColor='lightblue';">
table entry three
</layer></ilayer></td>
</tr>
</table>

The problem you face with DHTML is the cross -browser incompatibility issues. Netscape does not allow you to change the background color of a cell dynamically.

The only way to do this is to use layers. What you need to do is create a mouseOut layer and a mouseOver layer. Then create a script which can show & hide the mouseOver layer. It gets a bit complicated and is not the easiest thing to create. See www.brainjar.com for an example.

Alternatively you could use a javascript rollover script which uses images instead of tables.