Jump to content

radio button image

Recommended Posts

I was wondering, i've been doing some reading trying to get rid of a particularly pesky problem, im trying to have an image activate a radio button that corresponds to it, I was reading THIS URL and i was hoping someone could clarify this for me a bit, is the IMAGE the element, or is the radio button the element? could you provide an example i could expand upon, please?

Link to post
Share on other sites

The onclick in the post refers to whatever element you want to control the radio input.So it could be an image, span, div etc.This example uses an image:

<html>  <head>  <title></title>  <script type="text/javascript">  function pickRad(field, i){  var radioGroup = document.forms[0].elements[field];    radioGroup[i].checked = true;   }  </script>  </head>  <body>    <form>            <input  type="radio" name="folders" value="1">      <img src="http://w3schools.invisionzone.com/style_images/1/f_norm.gif"         onclick="pickRad('folders', 0)" alt="New Posts" border="0">       <br>      <input  type="radio" name="folders" value="2">      <img src="http://w3schools.invisionzone.com/style_images/1/f_norm_no.gif"           onclick="pickRad('folders', 1)" alt="No New Posts" border="0">       <br>      <input  type="radio" name="folders" value="3">      <img src="http://w3schools.invisionzone.com/style_images/1/f_hot.gif"           onclick="pickRad('folders', 2)" alt="Hot Topics" border="0">           </form>  </body></html>

The radio buttons are indexed as a group( like an array ) so the first's index is 0.Let us know if you have questions.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...