Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Image with Drop Down?

    Greetings, folks...

    I am a near-absolute javascript noob, although I do have a pretty extensive background in programming. What I'm looking to do is the following...

    I'd like a drop down box that lists, for instance, colors and, just to the right of that, have a JPG of that color. When the drop down box is changed, it'll automatically load the image of the color the person has selected.

    I've searched the web over for example code to do this, but haven't found anything this specific. Anyone able to lend a hand here?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var Path='http://www.vicsjavascripts.org.uk/StdImages/';
    
    function CngColor(obj){
     index=obj.selectedIndex;
     if (index<1){ return; }
     document.getElementById('Img1').src=Path+obj.options[index].value;
    }
    //-->
    </script></head>
    
    <body>
    <select onchange="CngColor(this);" >
    <option  >Select</option>
    <option value="Zero.gif" >Zero</option>
    <option value="One.gif" >1</option>
    <option value="Two.gif" >2</option>
    <option value="Three.gif" >3</option>
    <option value="Four.gif" >4</option>
    </select>
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=100 height=100 >
    </body>
    
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •