designer76 Posted August 14, 2009 Share Posted August 14, 2009 I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture in a div to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name (or whatever I decide to make it), and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me? Thanks in advance for any help given! function changeimg(){ document.getElementById('colors').src=document.getElementById('color_dropdown_options').value } <label> <select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()"> <option value="/images/thumbnails/image1.jpg">White</option> <option value="/images/thumbnails/image2.jpg">Blue</option> <option value="/images/thumbnails/image3.jpg">Green</option> </select> </label> <div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" /> Quote Link to comment Share on other sites More sharing options...
corbin Posted August 14, 2009 Share Posted August 14, 2009 You could keep an object that maps names to colors: var color_map = { white: "/images/thumbnails/image1.jpg", blue: "/......" }; Then you would just do color_map['white'] to get the /images... string. Quote Link to comment Share on other sites More sharing options...
designer76 Posted August 14, 2009 Author Share Posted August 14, 2009 You could keep an object that maps names to colors: var color_map = { white: "/images/thumbnails/image1.jpg", blue: "/......" }; Then you would just do color_map['white'] to get the /images... string. Thanks for your reply. Please forgive me as I'm somewhat green when it comes to writing Javascript. I don't fully understand what you meant in your reply. Did you mean my code should look something like this now? function changeimg(){ document.getElementById('product_colors').src=document.getElementById('color_dropdown_options').value var color_map = { white: "http://localhost/images/product_thumbnails/mens_tee_large.jpg", blue: "http://localhost/images/product_thumbnails/mens_tee_blue_large.jpg", green: "http://localhost/images/product_thumbnails/mens_tee_green_large.jpg" }; } If so, do I now make my values the color names? I have tried my code above and it's not working for me. Thanks again for your reply BTW.! Quote Link to comment Share on other sites More sharing options...
corbin Posted August 14, 2009 Share Posted August 14, 2009 I would do something like this: <html> <head> <title>Change Test</title> <script language="javascript"> var HandleImage = function() { var map = { white: "http://tbn0.google.com/images?q=tbn:uhoUW7JiWuNHwM:http://animals.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/animals/images/primary/great-white-shark.jpg", black : "http://tbn2.google.com/images?q=tbn:J8IWzecJ_usp7M:http://www.kek.jp/intra-e/press/2008/image/BlackHole_e1.jpg" }; return function(color) { document.getElementById('change_this').src = (map[color] !== undefined) ? map[color] : ''; } }(); </script> </head> <body> <img id="change_this"> <select onchange="HandleImage(this.value);"> <option value="">Select Color</option> <option value="white">White</option> <option value="black">Black</option> </select> </body> </html> The var HandleImage stuff is to avoid having the map in the global scope. I basically jacked that from http://www.youtube.com/watch?v=hQVTIJBZook. Quote Link to comment Share on other sites More sharing options...
designer76 Posted August 14, 2009 Author Share Posted August 14, 2009 I would do something like this: <html> <head> <title>Change Test</title> <script language="javascript"> var HandleImage = function() { var map = { white: "http://tbn0.google.com/images?q=tbn:uhoUW7JiWuNHwM:http://animals.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/animals/images/primary/great-white-shark.jpg", black : "http://tbn2.google.com/images?q=tbn:J8IWzecJ_usp7M:http://www.kek.jp/intra-e/press/2008/image/BlackHole_e1.jpg" }; return function(color) { document.getElementById('change_this').src = (map[color] !== undefined) ? map[color] : ''; } }(); </script> </head> <body> <img id="change_this"> <select onchange="HandleImage(this.value);"> <option value="">Select Color</option> <option value="white">White</option> <option value="black">Black</option> </select> </body> </html> The var HandleImage stuff is to avoid having the map in the global scope. I basically jacked that from http://www.youtube.com/watch?v=hQVTIJBZook. Thanks corbin! This worked perfectly, you are the man sir! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.