Hi, I am trying to create a drop down menu that displays an image in one area and text in another.
I have the text part working but I am having trouble incorporating the image array into the drop down functionality also. I want to use the selectedIndex property to pull info for the image as well as the text.
This is roughly what I have so far, any help would be much appreciated. I only included two examples to save on space here. I need to know how the image array should look and how I should manipulate the function I used for the text part for the image part. I want the image to appear where the div I created is. I created a class for this to position it.
What should the "select onchange" part look like to incorporate the image function into the same button that displays the text?
<head>
<style>
.div1 { margin-left:100px; background:#FFF; height:500px; width:600px; position: absolute;}
.area {border:solid; padding:10px; margin-left:750px; position:absolute;}
.shoe{margin-left:315px; margin-top:520px; position:absolute;}
</style>
<script language ="Javascript">
<!--hide me
var phone_book = new Array();
phone_book["990_V3"] = "The men's 990 features a classic design with a universal appeal.";
phone_book["Minimus_HighRes"] = "Minimus Hi-Rez is built using a patent-pending process";
function displayNumber(the_phone_book, entry)
{
var the_number = the_phone_book[entry];
window.document.the_form.number_box.value = the_number;
}
</script>
<script language ="Javascript">
<!--hide me
var shoez = new Array();
shoez["990_V3"] = new Image();
shoez["990_V3"].src = "990.jpg";
shoez["Minimus_HighRes"] = new Image();
shoez["Minimus_HighRes"].src ="MinHighRes.png";
function displayImage(the_shoez, element)
{
var the_image = the_shoez[element];
window.document.the_form.div1.src = the_image;
}
//show me-->
</script>
</head>
<body>
<form name ="the_form">
<b>Name:</b>
<select onChange = "displayNumber(phone_book, this.options[this.selectedIndex].value);displayImage(shoez, this.options[this.selectedIndex].src);">
<option value="990_V3">990 V3
<option value="Minimus_HighRes">Minimus_HighRes
</select>
<p>
<b class="shoe">Shoe Version:</b>
<div class="div1" id="div1"></div>
<textarea name="number_box" cols="40" rows="20" class="area" height="400px" width="800px"></textarea>
</form>
</body>
