www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: radio buttons to images

  1. #1
    Join Date
    Jun 2011
    Posts
    17

    radio buttons to images

    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.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Your question is confusing. Please clarify.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Jun 2011
    Posts
    17
    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.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    yea, you'd use javascript to read whatever the label is and display the image accordingly.

    What's the code look like so far?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Jun 2011
    Posts
    17
    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

  6. #6
    Join Date
    Jun 2011
    Posts
    17
    Also great wedding site.. the picture of you two under the pink flowers is a great shot.

  7. #7
    Join Date
    Jun 2011
    Posts
    17
    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;

  8. #8
    Join Date
    Jun 2011
    Posts
    17
    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.

  9. #9
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    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?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  10. #10
    Join Date
    Jun 2011
    Posts
    17
    Here are links to help explain I hope.

    Image 1 - Currently

    Image 2 - Goal

  11. #11
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    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?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  12. #12
    Join Date
    Jun 2011
    Posts
    17
    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.

  13. #13
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    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!
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  14. #14
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb

    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>

  15. #15
    Join Date
    Jun 2011
    Posts
    17
    Im going to give it a try and ill let you know how it works out. Thanks a ton.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles