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" /> Link to comment https://forums.phpfreaks.com/topic/170210-solved-need-help-with-javascript-select-listmenu-image-swap/ 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. Link to comment https://forums.phpfreaks.com/topic/170210-solved-need-help-with-javascript-select-listmenu-image-swap/#findComment-897874 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.! Link to comment https://forums.phpfreaks.com/topic/170210-solved-need-help-with-javascript-select-listmenu-image-swap/#findComment-897882 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. Link to comment https://forums.phpfreaks.com/topic/170210-solved-need-help-with-javascript-select-listmenu-image-swap/#findComment-897943 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! Link to comment https://forums.phpfreaks.com/topic/170210-solved-need-help-with-javascript-select-listmenu-image-swap/#findComment-898056 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.