48 users online (1 members and 47 guests)  


  Results 1 to 10 of 10

Related

  1. Replies: 1
  2. Replies: 4
  3. options based on one option    Forum: HTML Forum
    Replies: 2
  4. Replies: 6
  1. #1
    ms_la_donna's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2008
    Posts
    1

    Code to Change Picture Based on Drop Down Option Selected

    I am looking for a code to place into my website that will change a picture depending on the option selected in the corresponding drop down menu. For example, the default picture will be a picture of a blue card for the default setting "blue card" in the drop down menu. However, when "pink card" is selected in the drop down menu, the default picture changes to a picture of a pink card.

    Thanks in advance for your help!

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Code to Change Picture Based on Drop Down Option Selected

    You might find this example useful:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    img{
    height:200px;
    width:250px;
    display:block;
    margin-top:10px;
    }
    #caption{
    font-family:Verdana,tahoma,arial;
    font-size:10pt;
    text-align:center;
    display:block;
    width:250px;
    }
    </style>
    <script type="text/javascript">
    /************************************************************
    * Script by : Raymond Angana
    * Title: Dropdown Based Picture w/ Captions
    * First seen in AFHB2000.com
    * rangana in AHFB2000.com
    * Created June 5, 2008
    * This notice must stay intact
    /**********************************************************/
    window.onload=function()
    {
    	var caption=['Default Image Caption',
    				'Caption1',
    				'Caption2',
    				'Caption3',
    				'Caption4',
    				'Caption5',
    				'Caption6',
    				'Caption7',
    				'Caption8',
    				'Caption9'], // This will be your images caption
    	bp='http://h1.ripway.com/rangana/images/', //base url of your images
    	imgnum=14, //Number of your images. This should match on your comboboxes options.
    	thumb=document.getElementById('thumb'), //id of your image that will be changing
    	description=document.getElementById('caption'), //id of your caption
    	combobox=document.getElementById('selection'); // id of your combobox.
    	
    	combobox.onchange=function()
    	{
    	thumb.src=bp+'Picture'+this.value+'.jpg';
    	description.innerHTML=caption[this.value];
    	}
    }
    </script>
    </head>
    <body>
    <label>Please Change the default picture: </label>
    <select id="selection">
    <option>Change Picture</option>
    <option value="1">Image 1</option>
    <option value="2">Image 2</option>
    <option value="3">Image 3</option>
    <option value="4">Image 4</option>
    <option value="5">Image 5</option>
    <option value="6">Image 6</option>
    <option value="7">Image 7</option>
    <option value="8">Image 8</option>
    <option value="9">Image 9</option>
    </select>
    <br>
    <img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="mypic" id="thumb">
    <span id="caption">Caption for the default Image</span>
    </body>
    </html>
    Please see comments in the code. It explains the purpose.

    Hope it helps.
    Last edited by rangana; 06-05-2008 at 12:03 AM. Reason: Modify code

  3. #3
    firmaterra's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Apr 2007
    Posts
    81

    Re: Code to Change Picture Based on Drop Down Option Selected

    If you look at the site in my signature (thugvillage) I've a script that loads an image into a box depending what option is selected. I'm sure it could be easily adapted to drop down menu's too. Let me know if its of any use to you I'll forward the code for it

  4. #4
    TEECH's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    1

    Re: Code to Change Picture Based on Drop Down Option Selected

    How do I add 3 of these in one page without them conflicting?

    Thanks

  5. #5
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Code to Change Picture Based on Drop Down Option Selected

    Quote Originally Posted by TEECH View Post
    How do I add 3 of these in one page without them conflicting?

    Thanks
    The key is in the following lines:
    Code:
    	thumb=document.getElementById('thumb'), //id of your image that will be changing
    	description=document.getElementById('caption'), //id of your caption
    	combobox=document.getElementById('selection'); // id of your combobox.
    Make sure the id's listed above are unique, and you should have no problems with conflicts.

    You will need to duplicate the entire array, but pay particular attention to the above lines.

  6. #6
    techdiver's Avatar
    New User

    Status
    Offline
    Join Date
    May 2009
    Posts
    1

    Re: Code to Change Picture Based on Drop Down Option Selected

    I'm pretty new to coding. Do you think you could do an example? Like just use two drop down items: black and brown and the image that goes with each can be www.webs.com/image_black and www.webs.com/image_brown

  7. #7
    Potatogod93's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    2

    Re: Code to Change Picture Based on Drop Down Option Selected

    I was hoping someone could help me with the above code. I was able to run it on a editor provided by w3schools, but when entered in my code I'm using on FrontPage my page will not change onchange. I've changed all the tags but I'm sure they are consistent. I'm not using the css style, but I'm not using that on the editor and it still workds. Is there some reasons this may not work?

  8. #8
    Potatogod93's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    2

    Re: Code to Change Picture Based on Drop Down Option Selected

    In case if anyone has read this I was able to work around my problem by working opening a new page and rebuilding around the script with everything I had before. I'm not sure why this worked, but it did. However, I have a new question. I want to know if someone could point me in the direction that if the value is not found in the source folder that is looking for the image onchange to look for value "0", only for the image not the caption.

  9. #9
    bordeglobal's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2005
    Posts
    14

    Re: Code to Change Picture Based on Drop Down Option Selected

    Rangana supplied a great code.

    I modified and setup the following example: http://alivedirect.com/test-scripts/test-combobox/index.html

    Does anyone know of a shopping cart system that does what you see at the above link? Basically, as you can see you make a selection from the drop down menu - it shows an image, gives a description and price. Ultimately there will be many drop down menus per product, it is then tabulated in the end based on multiple selections.
    I tried Prestashop, it comes close but the script group attributes do not allow for image or description per selection.

    I guess you will prompt me to just code it in but I am more strong in php than javascript and do not know how to do this multiple times for products in a shopping cart scenario.

    Thanks in advance.
    Last edited by HTML; 12-26-2010 at 03:59 PM.

  10. #10
    vanesavis's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2013
    Posts
    9

    Re: Code to Change Picture Based on Drop Down Option Selected

    it is good option bar and you can easily select anything.



Tags for this Thread