In order to dynamically change the background color of a table, td, or div when the mouse is over it we can use css method.

let’s assume that we have a class in css called “tablebg”

.tablebg{
background-color: #e1eafe;
}

You know that we can use above code in css or html code.

to include the code in html we should wrap it by opening <style type=”text/css”> tag and close it by </style>, before </head> tag like this:

<style type="text/css">
.tablebg{
background-color: #e1eafe;
}
</style>

to changing background color on Mouseover we should add another code followed by above code,like this:

<style type="text/css">
.tablebg{
background-color: #e1eafe;
}
.tablebg:hover{
background-color: #cccccc;
}
</style>

and finally add this class to DIV, TD, or Table tag,

For example:

<TABLE class="tablebg" BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="100%">

OR

<td class="tablebg">

to changing background image you can use this code

<style type="text/css">
.tablebg2{
background: url("IMG Source") repeat-x #1A1A1A;
}
.tablebg2:hover{
background: url("2nd IMG Source") repeat-x #ff0000;
}
</style>

you can also check different method without using css here