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

Recommended Answers

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 …

Jump to Post

All 3 Replies

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/

commented: Urgh! Dreamweaver! A little sick in my mouth :) +14
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.