Welcome to WebmasterWorld Guest from

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

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

New User

joined:May 17, 2013
votes: 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?


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

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



<form name ="the_form">
<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

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


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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
votes: 0

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.
7:35 am on June 3, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
votes: 0

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 ?

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

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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members