radio buttons to images

**Cullyn78** · 06-13-2011 11:08 AM

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** · 06-13-2011 11:40 AM

Your question is confusing. Please clarify.

**Cullyn78** · 06-13-2011 11:45 AM

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** · 06-13-2011 11:48 AM

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** · 06-13-2011 11:53 AM

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** · 06-13-2011 11:54 AM

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

**Cullyn78** · 06-13-2011 12:02 PM

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’
);

function firdom(){
if(document.getElementsByTagName && document.createElement){
for (l=1;l<=6;l++){
h1s=document.getElementsByTagName(’h’+l);
scanandreplace(h1s,’h’+l);
}
}
}
function scanandreplace(h1s,tag){
for(i=0;i<h1s.length;i++){
for(f=0;f<replaceImages.length;f++){
chunks=replaceImages[f].split(’|’);
thish1=document.getElementsByTagName(tag)[i];
if(thish1.firstchild.nodevalue==chunks[0]){
newimg=document.createElement(’img’);
newimg.setattribute(’alt’,chunks[0])
newimg.setattribute(’src’,chunks[1])
// or newimg.src=chunks[1];
}
}
}
}
window.onload=firdom;

**Cullyn78** · 06-13-2011 12:04 PM

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** · 06-13-2011 12:57 PM

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** · 06-13-2011 01:06 PM

Here are links to help explain I hope.

Image 1 - Currently

Image 2 - Goal

**cbVision** · 06-13-2011 01:55 PM

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** · 06-13-2011 02:23 PM

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** · 06-14-2011 11:59 AM

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** · 06-14-2011 07:27 PM

Alternative solution ... slightly smaller.

Code:

<!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** · 06-15-2011 09:00 AM

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

Thread: radio buttons to images

Thread Tools

Display

radio buttons to images

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions