image - Display image on website depending on combination of multiple radio groups

Question

Imagine a webshop where you can buy custom clothes. The user is asked to choose two kinds of colors for his new t-shirt: primary and secondary color. This is done by 2 radiogroups. Depending on the colors the user chooses, an image will be shown, showing the shirt in the selected colors.

My problem is pretty similar, so I will describe it a little bit more abstractly:

I have 2 radiogroups, with 4 radio buttons each on my website:

group 1: A B C D, 
group 2: A B C D

Now i want to display an image on my website, depending on the combination of those two groups.

i.e.: user selects A from group 1 and B from group 2 --> display image1

i.e.: user slects A from group 1 and A from group B --> display image2

i.e.: user selects B from group 1 and nothing from group B --> display image3

and so forth...

Primary color:
<label><input type="radio" name="Color1" value="red" id="Color1_0" />Red</label>
<label><input type="radio" name="Color1" value="green" id="Color1_1" />Green</label>
<label><input type="radio" name="Color1" value="blue" id="Color1_2" />Blue</label>
<label><input type="radio" name="Color1" value="champagne" id="Color1_3" />Champagne</label>


Secondary color:
<label><input type="radio" name="Color2" value="red" id="Color2_0" />Red</label>
<label><input type="radio" name="Color2" value="blue" id="Color2_1" />Blue</label>
<label><input type="radio" name="Color2" value="purple" id="Color2_2" />Purple</label>
<label><input type="radio" name="Color2" value="champagne" id="Color2_3" />Champagne</label>

<img id="customimage" src="images/image1.jpg" />

Any ideas on how to do this?! After three days of thinking and Google-research, I've got nothing so far :( Maybe an Java array will be needed?? I'm open for suggestions :)

Answer 1

You can use jQuery (or a similar framework) to get an event in JavaScript every time the radio button selections are changed, and update the image tag (again using e.g. jQuery) with the URL of the newly selected image.

Changing the image source using jQuery

I would standardize on the names of the images (if you have that level of control) so that you can form the image name based just on the selected radio buttons (e.g. Shirts-Red-Large.jpg), otherwise you can lookup the appropriate image URL using an Ajax query.