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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing image by selecting drop down menu

    I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down?

    Kathy

  • #2
    New Coder
    Join Date
    Aug 2003
    Location
    Rhondda Cynon Taff, Wales
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    like so:
    PHP Code:
    <HTML>
    <
    HEAD><TITLE>JS1</TITLE>
    <
    SCRIPT LANGUAGE="JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
    <!--
    image1 = new image(120,90)
    image1.src = "
    desk1.gif"
    image2 = new image(120,90)
    image2.src = "
    desk2.gif"
    image3 = new image(120,90)
    image3.src = "
    desk3.gif"
    image4 = new image(120,90)
    image4.src = "
    desk4.gif"
    function loadCatch(list)
    {
    var img = list.options[list.selectedIndex].value
    document.thumbnail.src = eval(img + "
    .src")
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <ING SRC="
    desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
    <FORM>
    <SELECT NAME="
    catch" onChange="loadCatch(this)">
    <OPTION VALUE="
    Image1">Bands
    <OPTION VALUE="
    Image2">Clips
    <OPTION VALUE="
    Image3">Lamp
    <OPTION VALUE="
    Image4">Else
    </SELECT>
    </FORM>
    </BODY>
    </HTML> 

    hope that helped.
    Ryan Jones(sciguyryan)
    Visit us and chat at our forums - the Kidscript Forums

  • #3
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Got an error

    Gave me an error. Won't work.

  • #4
    New Coder
    Join Date
    Aug 2003
    Location
    Rhondda Cynon Taff, Wales
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Object expected? i will try to correct this for you.
    Ryan Jones(sciguyryan)
    Visit us and chat at our forums - the Kidscript Forums

  • #5
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Image1 = new Image(120,90);
    ...
    document.thumbnail.src = window[img].src;

    Though the preload script could be enhanced to easily support adding of images
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I still get object expected. I did find a " missing in the javascript and have added that. But still get the error.

  • #8
    New Coder
    Join Date
    Aug 2003
    Location
    Rhondda Cynon Taff, Wales
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, got it to work, here is the code:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    HTML>
    <
    HEAD><TITLE>JS1</TITLE>
    <
    SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
    <!--
    Image1 = new Image(120,90)
    Image1.src "desk1.gif"
    Image2 = new Image(120,90)
    Image2.src "desk2.gif"
    Image3 = new Image(120,90)
    Image3.src "desk3.gif"
    Image4 = new Image(120,90)
    Image4.src "desk4.gif"
    function loadCatch(list)
    {
    var 
    img = list.options[list.selectedIndex].value
    document
    .thumbnail.src = eval(img ".src")
    }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <IMG SRC="desk1.gif" NAME="thumbnail" HEIGHT="90" WIDTH="120">
    <FORM ACTION="">
    <SELECT NAME="catch" onChange="loadCatch(this)">
    <OPTION VALUE="Image1" SELECTED>Bands
    <OPTION VALUE="Image2">Clips
    <OPTION VALUE="Image3">Lamp
    <OPTION VALUE="Image4">Else
    </SELECT>
    </FORM>
    </BODY>
    </HTML> 
    Ryan Jones(sciguyryan)
    Visit us and chat at our forums - the Kidscript Forums

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    That would work..but eval() is unnecessary. It could be changed to:

    document.thumbnail.src = window[img].src;
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    New to the CF scene
    Join Date
    Jul 2003
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    THANK YOU

    Thank you. That worked great. I appreciate the help.

  • #11
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with this any one help??

    Hi
    This is my first post here,

    I have used this code above to change an image on a 3 page form i have on my site, it works superb all apart from when you click the back button to go to a previous page, the form stays on the correct selection but the image defaults back to the default image, is there an alteration that can be made to over come this small problem?


  •  

    Posting Permissions

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