Welcome to WebmasterWorld Guest from 54.163.23.73

Forum Moderators: open

Message Too Old, No Replies

Display an image and text from an array in drop down menu

Arrays with pictures and text

     

MaxChaos1

7:12 pm on May 17, 2013 (gmt 0)



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>

Readie

3:49 pm on May 31, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I don't believe select/option elements support displaying images in them for most (if not all) browsers.

You would actually need to create your own drop down menu using divs and javascript events (And if you intend on having it in a form, an input type="hidden" too), and style it to look like a select.

daveVk

7:35 am on Jun 3, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



window.document.the_form.div1.src = the_image;

- you need to set .src on an image NOT on a div
- I do not think you can get the div by 'the_form.div1'
- what you pass in as 'element', appears to be the image source ?

Try
function displayImage(the_shoez, src) { // the_shoez not used
document.getElementById('image1').src = src;
}

Replace
<div class="div1" id="div1"></div>
with
<div class="div1" id="div1"><image id="image1" src="noSelect.png"/></div>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month