Change Table's Background Color (onmouseover)

Ever wonder how to make the background color in a table row change, just by moving your mouse over it? Here's the code to use.

<TR onMouseOver="this.style.backgroundColor='#F0F0F0'" onMouseOut="this.style.backgroundColor='#FFFFFF'" bgcolor="#FFFFFF">

April 1, 2004 --

This question came in: "Well, this is great, and very informative. I wonder if there is a way to unset the background color. So that the color can be changed onmouseover and then the changes removed onmouseout. Useful when there is an image in the background..."

Here's how to do this:

1. Remove the bgcolor="#FFFFFF" (so that the table row will not have a background color, and thus allow people to see the image in the background). I'm assuming your background image is in the page and not in the table cell.

2. Change onMouseOut="this.style.backgroundColor='#FFFFFF'" to
onMouseOut="this.style.backgroundColor=''" (that's two apostrophes followed by the closing quotation mark). In other words, when the mouse leaves the cell, set the background color to NONE, to allow people to view the background image.
[ First posted on 11/25/2003 by Manuel Viloria ]