Image Radio Button

[mana2]

Hi,

Is it possible to create a radio button that is an image without using a scripting language like ASP? The regular HTML radio button parameters don't seem to have a value where you can set that.

Thanks so much.

 

[LFI]

Do you mean, instead of a circle to fill in, you maybe want a triangle or square? ...or you want to have three images (for example), and the user can only click on one?

The first would be achievable with swapping-gifs (onclick changes the image from an unfilled-in triangle to a fille-in triangle, for example).

The second would be achivable with javascript logic and variables.

Can you provide a little more detail?

--Dave

 

[mana2]

Yes, instead of the standard circle, I would want to use a different image for each of the radio button and the user would select one. Do you know where there is a javascript reference that shows how to do this?

Thanks so much.

 

[LFI]

Not exactly, but the basic premise is the following:

(1) develop two images: one UNchecked and one checked.

(2) use the default image (checked or unchecked) wherever you want. For this example, I will assume that there is one group of three.

<img id='radio' order='1' src='myUnchecked.gif' onclick='doSwap(this)' />One
<img id='radio' order='2' src='myUnchecked.gif' onclick='doSwap(this)' />Two
<img id='radio' order='3' src='myUnchecked.gif' onclick='doSwap(this)' />Three

(3) call a function called collectImageRadios() in the BODY tag's ONLOAD event.

var imageRadios = new Array();
function getImageRadios()
{
 var i_array = document.getElementsByTagName('IMG');
 for(var i=0; i<i_array.length; i++)
 {
  if(i_array[i].id == 'radio') [b]//make the img id's 'radio' for this to work[/b]
   imageRadios[imageRadios.length] = i_array[i];
 }

 [b]//now imageRadios has all the image tags that are radio buttons[/b]
}

(4) set the onclick event of the image to call a javascript function, say 'doSwap(this)' which will look at the SRC of the IMG tag (that called the doSwap-function) and choose the other one to be the SRC.

var checkedImageRadio = -1;
function doSwap(imageToSwap)
{
 for(var i=0; i<imageRadios.length; i++)
 {
  if(imageRadios[i].order == imageToSwap.order)
  {
   imageRadios[i].src == 'myChecked.gif';
  }
  else
  {
   imageRadios[i].src == 'myUnchecked.gif';
  }
 }
 [b]//using the above-logic makes the images behave like radio buttons in that if you check on an already-checked radio button, it stays checked.[/b]
)

I think that is all you should need to do.

If you have more than one separate group of radio buttons, it gets a little more complicated, but not much.

'hope this helps.

--Dave

 

[BillyRayPreachersSon]

If you wanted to them collect the data for these "radio" buttons server-side once your form is submitted, however, you would also need to create some regular radio buttons (which you could keep hidden) and set their values "onsubmit" of the form - otherwise you will not see any info from them when the form is submitted.

Hope this helps,
Dan

 

[LFI]

True, Dan, or just one hidden field per group of radio buttons whose value gets updated following the assignment of the radio button that's been checked:

imageRadios[i].src == 'myChecked.gif';
document.formName.hiddenFieldName.value = imageRadios[i].value; [b]//you'll have to give each of the IMG tags a 'value' attribute[/b]

Thanks, Dan!

--Dave

 

[mana2]

Thanks so much for your replies. I'll try it out.