How to Combining Roll Over Image with radio Button

Well your first step is to actually format the HTML so it's readable

<td colspan="9" rowspan="3" bgcolor="#999999"><strong>Front Desk</strong></td>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('exunsatisfied','','images/exunsatisfied2.png',1)"><img
        src="images/exunsatisfied.png" alt="" width="113" height="100"
        id="exunsatisfied"></a></td>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('unsatisfied','','images/unsatisfied2.png',1)"><img
        src="images/unsatisfied.png" alt="" width="113" height="100"
        id="unsatisfied"></a></td>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('neutral','','images/neutral2.png',1)"><img
        src="images/neutral.png" alt="" width="113" height="100" id="neutral"></a></td>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('satisfied','','images/satisfied2.png',1)"><img
        src="images/satisfied.png" alt="" width="113" height="100"
        id="satisfied"></a></td>
<td bgcolor="#FFFFFF"><a href="#" onMouseOut="MM_swapImgRestore()"
    onMouseOver="MM_swapImage('exsatisfied','','images/exsatisfied2.png',1)"><img
        src="images/exsatisfied.png" alt="" width="113" height="100"
        id="exsatisfied"></a></td>
</tr>
<tr>
    <td bgcolor="#FFFFFF"><p align="center">
            <strong>Extremely Unsatisfied</strong>
        </p></td>
    <td bgcolor="#FFFFFF"><div align="center">
            <strong>Unsatisfied</strong>
        </div></td>
    <td bgcolor="#FFFFFF"><div align="center">
            <strong>Standard</strong>
        </div></td>
    <td bgcolor="#FFFFFF"><div align="center">
            <strong>Satisfied</strong>
        </div></td>
    <td bgcolor="#FFFFFF"><div align="center">
            <strong>Extremely Satisfied</strong>
        </div></td>
</tr>
<tr>
    <td width="116" bgcolor="#FFFFFF">
        <div align="center">
            <input type="radio" name="qa" id="qa1" value="Extremely Unsatisfied">
        </div>
    </td>
    <td width="116" bgcolor="#FFFFFF"><div align="center">
            <input type="radio" name="qa" id="qa2" value="Extremely Unsatisfied">
        </div></td>
    <td width="112" bgcolor="#FFFFFF"><div align="center">
            <input type="radio" name="qa" id="qa3" value="Extremely Unsatisfied">
        </div></td>
    <td width="116" bgcolor="#FFFFFF"><div align="center">
            <input type="radio" name="qa" id="qa4" value="Extremely Unsatisfied">
        </div></td>
    <td width="129" bgcolor="#FFFFFF"><div align="center">
            <input type="radio" name="qa" id="qa5" value="Extremely Unsatisfied">
        </div></td>
</tr>
<tr>

Now ... I'm sorry, but I'm confused by what you're trying to do :(

Wow... that is some ancient Dreamweaver way to mark-up a page.
Not sure what you're after either, but if you want to override the default look of radio buttons (checked and unchecked) then you can do this with CSS, but looking at that mark-up it seems you've never heard of CSS :)
Here's a pure CSS way: http://www.456bereastreet.com/archive/201211/accessible_custom_checkboxes_and_radio_buttons/

Here are two CSS with jQuery ways:
http://labelauty.js.org/
http://icheck.fronteed.com/