Using radio buttons to change an image

Discussion in 'Web Design and Development' started by Sdashiki, Oct 2, 2012.

  1. Sdashiki, Oct 2, 2012
    Last edited: Oct 2, 2012

    Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #1
    This seems like a rather straightforward and simple idea. And Ive got most of it ironed out, but am running into a wall. I pulled most of this code from various sites after a lot of searching.

    To begin, I have a simple image. It is actually a sliced image (trust me, best for this project) so that the pieces which I am looking to have change based on radio button selection can simply change by changing the <img src> of each piece to change.

    NO problem for just one image (slice).

    Code:
    function ChangeImage(newimage)
    {
    
    document.[COLOR=Red]nameofimage[/COLOR].src=newimage;
    
    }
    And I am using the <img name="xxx" src="yyy" /> setup for all the images.

    And this for the radio button(s)
    Code:
    <input type="radio" value="value_of_radio" onclick="ChangeImage('--New Image src Here--')" />
    But I really can not figure out how to have multiple things like this on the same page.

    I would like to have like 6 or 7 different groups of radio buttons. So that each group changes ONE piece of the image (remember, it is sliced and I simply need to just change the img src to change the color).

    What am I missing here!?


    To put it in real world terms:

    Imagine a stick figure on your screen. There are groups of radio buttons like hat, shoes, shirt, gloves. And in each group are multiple choices like red, green, blue, yellow. So clicking hat-yellow puts a yellow hat on the stick figure. Red shoes and so on and so forth. In my case, the hat/head or feet/shoes are a sliced .jpg which can be changed by simply changing the img src path to point to a different color.
     
  2. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    Something like this may get you heading in the right direction; you just need a little event handler.

    Code:
    <script language=javascript type=text/javascript>
      function check_value(){
        switch(document.test.field.value){
           case "one":
             document.getElementById("imagetest").innerHTML = "<img src='images/firstimage.png'>";
             break;
           case "two":
              document.getElementById("imagetest").innerHTML = "<img src='images/secondimage.png'>"; 
              break;
           case "three":
              document.getElementById("imagetest").innerHTML = "<img src='images/thirdimage.png'>"; 
              break;
        }
      }
    </script>
    
    
    <form name='bob'>
        <input type="radio" name="field" value="one" onchange='check_value()'>one 
        <input type="radio" name="field" value="two" onchange='check_value()'>two 
        <input type="radio" name="field" value="three" onchange='check_value()'>three 
    </form>
    
    <div id='imagetest'>
    </div>
    
     
  3. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #3
    I was able to have a much easier time with this little snippet I found:

    Code:
     $(document).ready(function() { 
                $("input:radio[name=vf]").change(function() { //name = button group name
                    if (this.value == "0") {
                        $("#vf").attr( //image file name
                            'src', '/images/onestep/lime/vf.jpg' //image path
                        );
                    }
                    else if (this.value == "8") {
                        $("#vf").attr( //image file name
                            'src', '/images/onestep/vf.jpg' //image path
                        );
                    }
                    else {
                        $("#vf").attr( //image file name
                            'src', '/images/onestep/vf.jpg'    //image path             
                        );
                    }
                });
    Code:
    <div id="radiobuttons">
    <label><input name="vf" type="radio" value="8" />NONE</label>
    <label><input name="vf" type="radio" value="0" />Lime</label>
    <label><input name="vf" type="radio" value="1" />Maroon</label>
    <label><input name="vf" type="radio" value="2" />Orange</label>
    <label><input name="vf" type="radio" value="3" />Pink</label>
    <label><input name="vf" type="radio" value="4" />Purple</label>
    <label><input name="vf" type="radio" value="5" />Red</label>
    <label><input name="vf" type="radio" value="6" />Teal</label>
    <label><input name="vf" type="radio" value="7" />Yellow</label>
    </div>
     
  4. Sdashiki thread starter macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens

Share This Page