By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,654 Members | 1,580 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,654 IT Pros & Developers. It's quick & easy.

change image source base on 2 dropdownlist

P: 2
hi,
I am looking for a javascript that will change the image display or link base on two dropdown lists. Meaning if i have 4 options on first list and another 4 options on the second list i will have 16 combinations or 16 images. Thank you.
May 28 '12 #1
Share this Question
Share on Google+
6 Replies


acoder
Expert Mod 15k+
P: 16,027
Post your code even if it's HTML only, so that we have a better chance of providing a solution.
May 29 '12 #2

P: 2
something like this except that i need two dropdownlists.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <style type="text/css">
  5. img{
  6. height:200px;
  7. width:250px;
  8. display:block;
  9. margin-top:10px;
  10. }
  11. #caption{
  12. font-family:Verdana,tahoma,arial;
  13. font-size:10pt;
  14. text-align:center;
  15. display:block;
  16. width:250px;
  17. }
  18. </style>
  19. <script type="text/javascript">
  20. /************************************************************
  21. * Script by : Raymond Angana
  22. * Title: Dropdown Based Picture w/ Captions
  23. * First seen in AFHB2000.com
  24. * rangana in AHFB2000.com
  25. * Created June 5, 2008
  26. * This notice must stay intact
  27. /**********************************************************/
  28. window.onload=function()
  29. {
  30.     var caption=['Default Image Caption',
  31.                 'Caption1',
  32.                 'Caption2',
  33.                 'Caption3',
  34.                 'Caption4',
  35.                 'Caption5',
  36.                 'Caption6',
  37.                 'Caption7',
  38.                 'Caption8',
  39.                 'Caption9'], // This will be your images caption
  40.     bp='http://h1.ripway.com/rangana/images/', //base url of your images
  41.     imgnum=14, //Number of your images. This should match on your comboboxes options.
  42.     thumb=document.getElementById('thumb'), //id of your image that will be changing
  43.     description=document.getElementById('caption'), //id of your caption
  44.     combobox=document.getElementById('selection'); // id of your combobox.
  45.  
  46.     combobox.onchange=function()
  47.     {
  48.     thumb.src=bp+'Picture'+this.value+'.jpg';
  49.     description.innerHTML=caption[this.value];
  50.     }
  51. }
  52. </script>
  53. </head>
  54. <body>
  55. <label>Please Change the default picture: </label>
  56. <select id="selection">
  57. <option>Change Picture</option>
  58. <option value="1">Image 1</option>
  59. <option value="2">Image 2</option>
  60. <option value="3">Image 3</option>
  61. <option value="4">Image 4</option>
  62. <option value="5">Image 5</option>
  63. <option value="6">Image 6</option>
  64. <option value="7">Image 7</option>
  65. <option value="8">Image 8</option>
  66. <option value="9">Image 9</option>
  67. </select>
  68. <br>
  69. <img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="mypic" id="thumb">
  70. <span id="caption">Caption for the default Image</span>
  71. </body>
  72. </html>
May 29 '12 #3

acoder
Expert Mod 15k+
P: 16,027
What would the values of the second dropdown be and what would be the name of the image files?

Line 48 is where the image source is set.
May 30 '12 #4

P: 3
I'm also having a similar problem, if I were to post my two sets of drop down codes would you be able to help me?
Aug 31 '12 #5

acoder
Expert Mod 15k+
P: 16,027
Sure, though if the problem is different, I will split it off into its own thread.
Sep 10 '12 #6

P: 3
It currently has its own thread here :
http://bytes.com/topic/c/answers/942...rop-down-menus
Sep 10 '12 #7

Post your reply

Sign in to post your reply or Sign up for a free account.