I have this bit of code:

<TR WIDTH="247" BGCOLOR="#BFBFBF">
<TD WIDTH="10">
<IMG SRC="../media/blank_pic.gif">
</TD>
<TD WIDTH="5"></TD>
<TD ALIGN="LEFT">
<A CLASS="order" HREF="./merchant.mv?blab=bla"

onMouseover="document.h.src = './blue-arrow.gif'"
onMouseout="document.h.src='./blank_pic.gif'">


Link Text bla bla bla
</A>
</TD>
</TR>

This is just one table row in a long table. You can view the table HERE. (Left side.)
There are three cells in a row here: first cell holds the images for the onMouseout/onMouseover JavaScript contained in the 3rd cell. Second cell is just a spacer cell.

Can I do this rollover effect using CSS instead of JavaScript, and using text instead of images? When a person mouses over the 3rd cell, I want a bit of text to appear in the first cell instead of an img:

onMouseover (hover)
<FONT FACE="webdings" COLOR="navy">4</FONT>

onMouseout (link)
<FONT FACE="webdings" COLOR="#BFBFBF">4</FONT> (match the background color of the cell, or maybe I don't need anything to appear there at all? Can I do that

Am I nuts or is this possible? (Don't answer the "am I nuts" part. I was just so informed.)

Thanks for your help.