OnMouseOver background change

i have a table w/ 7 cells. each cell has a bg pic in it. when the mouse goes over the individual cells, i want the pic to disappear and the gray bg to be shown. then, when they take their mouse out of it, i want the pic to reappear.
here is what i did. but it doesnt work...



<td class="menutable" align="center" width="14.25%" onMouseOver="this.style.background-image='none'"; onMouseOut="this.style.background-image='http://jamcalc.org/MenuBG4.JPG'";>

<a class="menu" href="http://jamcalc.org"><font size="2">HOME</font></a>

</td>

you are putting the semicolons in the wrong place. it should be:

<td class="menutable" align="center" width="14.25%" onMouseOver="this.style.background-image='none';" onMouseOut="this.style.background-image='http://jamcalc.org/MenuBG4.JPG';">

<a class="menu" href="http://jamcalc.org"><font size="2">HOME</font></a>

</td>

although i still got script errors on mine...

This reply is a bit late, but try this:

onMouseOver="this.style.background='none';" onMouseOut="this.style.background='url(http://jamcalc.org/MenuBG4.JPG)';"

You can add other features, like the following:
onMouseOut="this.style.background='url(http://jamcalc.org/MenuBG4.JPG) no-repeat center';"

Hope this helps anyone out there still looking for answers.