How to Combining Roll Over Image with radio Button

[rayearth_1]

i have creating a feedback devices system, and already done with only the radio button.

but the people wants more, then i added some roll over image, and having dificulties to connect between them.

people wants to, when they click the image, and the radio button show the indocator, that it have been click, heres the code.

<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>

// need your suggestion, thanks

[Dani]

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>

[Dani]

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

[gentlemedia]

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/