Using radio buttons to change an image

[Sdashiki]

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).

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)

<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.

 

[960design]

Something like this may get you heading in the right direction; you just need a little event handler.

<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>

 

[Sdashiki]

I was able to have a much easier time with this little snippet I found:

 $(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             
                    );
                }
            });

<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>

 

[Sdashiki]

And here it is in action:

http://www.polaroidconversions.com/onestep/