Yet Another Post Requesting Help

JavaScript
1

I have created most of the code however I would like to expand my options. Basically the code changes an image when a user makes a selection from a drop down menu.

<head>

<script language="javascript">

function linkrotate(which){
var mylinks=new Array()
mylinks[0]="http://www.#.com"
mylinks[1]="http://www.#.com"
mylinks[2]="http://www.#.com"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="image1.jpg">Option 1</option>
<option value="image2.jpg">Option 2</option>
<option value="image3.jpg">Option 3</option>
</select></p>
</form>

What I would like to do it have two drop down menus that work together instead of one - providing a more accurate image for the user. Right now the user has one option to select from the drop down menu in which the image is changed. I’d like to be able to have the user choose from two drop down menus.

For example:

Drop down menu number 1
Shoe Color: Black or Red

Drop down menu number 2
Shoelace Color: White or Brown

Where a user chooses ‘Black’ from the first option then the images will only show a black shoe with white laces or brown laces (based on their choice from the next drop-down menu. Furthermore, where a user chooses ‘Red’ from the first option then image from the next choice will only show a red shoe with white or brown laces.

Suggestions? Guidance? Help?

2

I’m trying to keep it simple. This certainly isn’t the most flexible approach. In particular this might not work well if, for example, a green shoe doesn’t have an image for black laces. You would need to have an image for every possible combination.

Make two functions, getShoeColor() and getLaceColor(). The functions should look at the proper select menu, and then return a string for whatever is chosen in that menu.

Then, you can use a naming convention for your image files.
shoeColor_laceColor.jpg

So, for black shoe with white laces
black_white.jpg

In your showimage() function, you can call the other two functions to get the data you need to craft the proper filename. Just concatenate the strings together.

var shoeColor = getShoeColor();
var laceColor = getLaceColor();
var filename = shoeColor + "_" + laceColor + ".jpg";

//uncomment to test the value if needed
//alert(filename);

Give it a shot. Make sure you use unique names, and don’t forget the use the onChange event for the other select menu.