Kibble Posted April 14, 2009 Share Posted April 14, 2009 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 More sharing options...
jeffman Posted April 14, 2009 Share Posted April 14, 2009 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. Link to comment Share on other sites More sharing options...
Kibble Posted April 22, 2009 Author Share Posted April 22, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.