homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Display an image and text from an array in drop down menu
Arrays with pictures and text

Msg#: 4575077 posted 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?


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





WebmasterWorld Senior Member 5+ Year Member

Msg#: 4575077 posted 3:49 pm on May 31, 2013 (gmt 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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4575077 posted 7:35 am on Jun 3, 2013 (gmt 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>

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved