mira este ejemplo y lo ajustas a lo que necesitas:
Código HTML:
<html>
<script language="JavaScript">
function setPointer(field, action, defaultColor, pointerColor) {
var newColor
var currentColor
currentColor=field.style.backgroundColor;
if (action == 'over' && currentColor.toLowerCase() == defaultColor.toLowerCase()) {
newColor=pointerColor; }
if (action == 'out' && currentColor.toLowerCase() == pointerColor.toLowerCase()) {
newColor=defaultColor; }
if (newColor) {
field.style.backgroundColor=newColor; }
}
</script>
<head>
<title>Untitled Document</title>
</head>
<table width="100" height="100" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #000000;">
<tr>
<td align="center" valign="bottom" style="background: #CCCCCC" onMouseOver="setPointer(this, 'over', '#CCCCCC', '#F0F0F0');" onMouseOut="setPointer(this, 'out', '#CCCCCC', '#F0F0F0');">
</tr>
</table>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</body>
</html>