homepage Welcome to WebmasterWorld Guest from 54.161.202.234
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
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
MaxChaos1




msg:4575079
 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




msg:4579926
 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.

daveVk




msg:4580543
 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 ?

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>

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