0

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

Attachments Screen_Shot_2016-10-12_at_8_42_48_AM.png 175.18 KB
3
Contributors
3
Replies
43
Views
1 Year
Discussion Span
Last Post by gentlemedia
0

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

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/

Votes + Comments
Urgh! Dreamweaver! A little sick in my mouth :)
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.