radio buttons to images

This site is best viewed in a modern browser with JavaScript enabled.

Cullyn78

I am trying to turn radio buttons to show images based off the label of the radio button input instead of using radio buttons.

I have to use only javascript for this and I am at a loss. Can anyone help me out.

WolfShade

Your question is confusing. Please clarify.

Cullyn78

I use some store software that has radio buttons for color choices. I am trying to figure out how to change the radio button selection from radio style buttons to a small image of the color. I know it has to be with javascript but I am at a loss how to do it.

So in the code it has the <input> and a <label> I would like it to load an imaged based off the <label> tag.

Example:

<label>white</label> instead of radio button it would load a 50x50px image of white

I hope that clears it up some.

cbVision

yea, you'd use javascript to read whatever the label is and display the image accordingly.

What's the code look like so far?

Cullyn78

Thats the kicker Im at a loss. I don't know where to start with this. I understand a bit of javascript and I have been looking all over the web for help on this and I haven't found much.

I dont usually code in Javascript but I have to with the company that we are using for the cms solution

Cullyn78

Also great wedding site.. the picture of you two under the pink flowers is a great shot.

Cullyn78

I have some code that should help switch out the color name with an image. But I don't think it will work the way I need it. Here it is:

replaceImages = new Array(
’White|white.gif’,
’Blue|blue.gif’,
’Black|black.gif’
);

Cullyn78

Where the words white is I woudl like to pull from the <label> tag this way It could be used without having to edit it each time. Then I would like the image to become a radio button input.

cbVision

Thanks for the compliment on the site

Anyway, I'm having a hard time understanding exactly what you're trying to achieve. Could you possibly create a visual representation? Maybe illustrate what it looks like now, and what you are trying to get it to look like?

What does your HTML look like that you're trying to transform? You said it has labels and inputs, but is it wrapped in a DIV or anything? Are there any classes or ID's involved?

Cullyn78

Here are links to help explain I hope.

Image 1 - Currently

Image 2 - Goal

cbVision

Ah yes, now we're cooking! Do you want to keep the actual radio button there? How is the user suppose to know which color is selected?

Cullyn78

The user would just click on the color and the software will load the right photo in the large photo area.. That part works now. Its just the radio button part that doesnt work.

cbVision

This should help explain how it's accomplished. Basically, you need to use JavaScript to figure out what radio buttons are present. You're then building a new list of colors and putting it right after the radio buttons. You then need to bind an onclick action to the newly added list which will select the correct radio button when it's clicked.

Check it out here:
http://jsfiddle.net/dfreema1/GGPgQ/

If everything is working, you'd then hide the radio buttons with CSS, leaving you with the desired result.

Good luck, and let me know if you need any clarification!

JMRKER

Alternative solution ... slightly smaller.

<!DOCTYPE HTML>
<html>
<head>
<title> Radio Button Colors </title>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=247592

function setRBtn(RBtnGroup,which) {
  var sel = document.getElementsByName(RBtnGroup);
  for (var i=0; i<sel.length; i++) {
    if (i == which) {
      sel[i].checked = true;
      document.getElementById('colorChosen').style.backgroundColor=sel[i].value;
    }
  }
}

// Following is not needed, only for demo
function toggleDisplay(IDS, flag) {
  var tmp = document.getElementById(IDS);
  if (flag == true) { tmp.style.display = 'inline'; }
               else { tmp.style.display = 'none'; } 
}

</script>
<style type="text/css">
#color_Options li {
 width: 50px; height: 50px;
 border: solid 1px #000;
 list-style-type:none;
 float:left;margin:5px 5px;
}
.blue {background-color: blue;}
.green {background-color: green;}
.sherbert {background-color: orange;}
.yellow {background-color: yellow;}
.red {background-color: red;}
.black {background-color: black;}
.white { background-color: white;}
</style>

</head>
<body>

// Following is not needed, only for demo
<input type="checkbox" onchange="toggleDisplay('RBtnBlock',this.checked)">

<div id="RBtnBlock" style="display:none"> 
<!-- change to 'block' for testing and 'none' after testing -->

 <input type="radio" name="RBtn" value="white"> White
 <input type="radio" name="RBtn" value="blue"> Blue
 <input type="radio" name="RBtn" value="green"> Green
 <input type="radio" name="RBtn" value="orange"> Orange
 <input type="radio" name="RBtn" value="yellow"> Yellow
 <input type="radio" name="RBtn" value="red"> Red
 <input type="radio" name="RBtn" value="black"> Black
</div>

<ul id="color_Options">
 <li class="white" onclick="setRBtn('RBtn',0)"></li>
 <li class="blue" onclick="setRBtn('RBtn',1)"></li>
 <li class="green" onclick="setRBtn('RBtn',2)"></li>
 <li class="sherbert" onclick="setRBtn('RBtn',3)"></li>
 <li class="yellow" onclick="setRBtn('RBtn',4)"></li>
 <li class="red" onclick="setRBtn('RBtn',5)"></li>
 <li class="black" onclick="setRBtn('RBtn',6)"></li>
</ul>

<!-- following is for testing purposes only -->
<div style="float:left">
<span style="float:left">Chosen: </span><div id="colorChosen"
 style="width:50px; height:50px; border:solid 1px black; float:left;
 margin:5px 5px; background-color:white; display:block;">
&nbsp;</div>
</div>
<br style="clear:both">

</body>
</html>

Cullyn78

Im going to give it a try and ill let you know how it works out. Thanks a ton.

Cullyn78

It works great but when I put it into the system we use it doesnt seem to work. Here is the code that generates our radio buttons:

<td class="ProductLabel" valign="top">Colors:</td><td align="right" valign="top" style="width:6px;"><span id="" style="color:Red;">*</span></td><td class="ProductControl" valign="bottom"><span id="t1_t2_c_p_tmplProduct_Colors"><table id="t1_t2_c_p_tmplProduct_Colors_ddl" class="Radios" border="0">
<tr>
<td><input id="t1_t2_c_p_tmplProduct_Colors_ddl_0" type="radio" name="t1:t2:c:p:tmplProduct:Colors_ddl" value="-pZg4r6LY4y6l1mwON6vWdXNIKNwNuRoGrbJNMpXBu88KH7wetX-ppew-e-e" checked="checked" /><label for="t1_t2_c_p_tmplProduct_Colors_ddl_0">White</label></td>
</tr><tr>
<td><input id="t1_t2_c_p_tmplProduct_Colors_ddl_1" type="radio" name="t1:t2:c:p:tmplProduct:Colors_ddl" value="avQf-pnmpWNn3QtFdZddIh9hJb5Gyy9MaNSudtzF-pb1I0dPLgDKNPfA-e-e" /><label for="t1_t2_c_p_tmplProduct_Colors_ddl_1">Blue</label></td>

		</tr><tr>
			<td><input id="t1_t2_c_p_tmplProduct_Colors_ddl_2" type="radio" name="t1:t2:c:p:tmplProduct:Colors_ddl" value="Ta6MExshiELaTqgKexq7wwOD-s3DK-staSt53nRme9KGDcXOirTZ-sYRg-e-e" /><label for="t1_t2_c_p_tmplProduct_Colors_ddl_2">Sherbert</label></td>
		</tr>
	</table><span controltovalidate="t1_t2_c_p_tmplProduct_Colors_ddl" errormessage="A value is required for Colors." display="None" id="t1_t2_c_p_tmplProduct_validator1" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;"></span></span></td>

JMRKER

Which suggested script are you using? It does not look a bit like that of post #14.
If you cannot post the portions significant to the problem, at least post a link to the site.

Also you should surround your forum scripts with [ code] and [ /code] tags (without the spaces)
to make it easier to read without the smilies :p you have imbedded.

Cullyn78

Sorry about that it was my fault. I didnt know about the code tags. Here is the code for the page. I thought I could take the code you provided and change the id tags but it didnt work with this stupid system we have. Here is the full code:

http://themccluskeyclan.com/htmlcode.txt

JMRKER

You have an awful lot of code to view there.
Which suggested script did you use and where did you put it?
I don't see it inline and I cannot see the external JS or CSS file contents.
Where did you put the color boxes to click on to change the associated radio buttons?
Where are the functions to cause the radio buttons to be set?

Cullyn78

I pulled the style out of the css file and made it inline. I guess I should have kept it that way. Then I made sure the javascript was showing up. Thank you for being patient with me on this one. I'm really lost.

http://themccluskeyclan.com/htmlcode.txt