Jump to content

Having A Dropdown Menu Selection Change An Image


Kibble
 Share

Recommended Posts

Hey guys,I'm working on a site for my uncle, and I have a feature I'd like to implement. http://bradkav.com/artexbarnsolutions/aquadump.htmlOn that page there, you will see a dropdown menu. I want whatever item is selected in that box to chose what image is displayed in the middle of the page. When the user changes to a different model, a new picture is displayed so the user can see what the certain model looks like.I'm thinking this goes outside the bounds of normal HTML/CSS... is this Java? How would I go about doing something like this?Thanks for the help. :)

Link to comment
Share on other sites

Yes, some JavaScript will do the trick. The HTML will also need to be adjusted so that the script can work with it. Specifically, we need to assign some id's, values, and event handlers. That way, the script can respond when your user selects something on the dropdown menu, and so the script knows where to put the image. I also took the dimensions out of the image tag, because I assumed the different images would have different dimensions.Switching the image is very easy. Just one line of code.But to get the correct image, we need to store all the image addresses. I've done this using an associative array called products. The indexes for the array members match your inventory numbers, which now also match the values of your menu options. I only had one image address to work with, but following that example, you should be able to change/set the value of each array member so that it contains the correct address. You can add items to the array also, just by extending the pattern. It's an associative array, so the indexes don't have to be sequential, and don't even have to be numbers, for that matter.

<script type="text/javascript">	products = new Array();	products["23275"] = "http://artexbarnsolutions.com/images/sml_floor_mount_water.gif";	products["23276"] = "http://artexbarnsolutions.com/images/something.gif";	products["23277"] = "http://artexbarnsolutions.com/images/something.gif";	products["23278"] = "http://artexbarnsolutions.com/images/something.gif";	products["23279"] = "http://artexbarnsolutions.com/images/something.gif";	products["23280"] = "http://artexbarnsolutions.com/images/something.gif";	products["23281"] = "http://artexbarnsolutions.com/images/something.gif";	products["23282"] = "http://artexbarnsolutions.com/images/something.gif";	function show_product_image (i) {		document.getElementById("product_image").src = products[i];	}</script>*		  *		  *<img id="product_image" src="http://artexbarnsolutions.com/images/sml_floor_mount_water.gif" />*		  *		  *<select onchange="show_product_image(this.options[this.selectedIndex].value)">	<option value="23275">#23275 - 180cm (6') Long, 310L (68gal) Capacity -Galvanized</option>	<option value="23276">#23276 - 180cm (6') Long, 310L (68gal) Capacity -Stainless Steel</option>	<option value="23277">#23277 - 240cm (8') Long, 410L (90gal) Capacity -Galvanized </option>	<option value="23278">#23278 - 240cm (8') Long, 410L (90gal) Capacity -Stainless Steel </option>	<option value="23279">#23279 - 300cm (10') Long, 500L (110gal) Capacity –Galvanized </option>	<option value="23280">#23280 - 300cm (10') Long, 500L (110gal) Capacity -Stainless Steel </option>	<option value="23281">#23281 - 360cm (12') Long, 600L (132gal) Capacity -Galvanized </option>	<option value="23282">#23282 - 360cm (12') Long, 600L (132gal) Capacity -Stainless Steel </option></select>

Put the script section between the <head></head> tags of your document. Put the select section in the same place you currently have it. Same with the image.If the images load too slowly, we can add a pre-load function. I didn't do it now because I didn't want to give you too much at once.Let us know if it's not what you need, doesn't work, or you need more explanation.

Edited by Deirdre's Dad
Link to comment
Share on other sites

http://bradkav.com/artexbarnsolutions/aquadump.htmlI got it working; thanks!I've been looking into OOP techniques and I acutally understand what is happening; if this was a month ago, I'd have no idea what an array was. :)Thanks so much for your help! This is making me a lot more confident.Looks like I have to dive into java now... this is a great start. :)Thanks!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...