jscript css class swap buggy ?

Hi -
I have the following classes defined in a a linked stylesheet...

.side{background-image: url(images/wds_side_panel.jpg);
background-position: bottom;
background-repeat: no-repeat;
padding-left:65px;
padding-top: 20px;
padding-right:24px;
padding-bottom:29px;
}

.side_over{background-image: url(images/wds_side_panel_over.jpg);
background-position: bottom;
background-repeat: no-repeat;
padding-left:65px;
padding-top: 20px;
padding-right:24px;
padding-bottom:29px;
}

and am swapping them with an 'onMouseOver' that is within a TD I have on my page, thusly:

<td class="side"
onMouseDown="window.location='news.html';"
onMouseOver="document.body.style.cursor='pointer'; this.className='side_over';"
onMouseOut="document.body.style.cursor='default'; this.className='side';" >
<a href="news.html">News</a></td>


The client has reported that when putting the mouse over the td, the page behaves erratically, and the roll-over background image doesnt always appear..

Is this the best way to achieve what I want here ?
Might I need to preload the image in the 2nd class?

an example page of the above is:
http://www.rc23.com/wds_beta/aboutwds.html

Any help would be greatly appreciated.

Thank you all .

Mike.

It seems to be a little smoother now with the addition of this preloading script into my linked .js file..

//preloader for quick display
var x = new Image();
x.src = 'images/wds_side_panel_over.jpg';

var y = new Image();
y.src = 'images/svc_side_panel_over.jpg';

var z = new Image();
z.src = 'images/case_side_panel_over.jpg';

I will await conf from the client that this has nailed it.
If anyone can confirm that its all working smoothly for them at

http://www.rc23.com/wds_beta/aboutwds.html

and what browser you're using, that would be splendid, thank you.

Mike.