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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript dropdown menu that changes html image src

    Hi this is my first post, I usually search forums and google answers to my javascript questions, but I am not finding any answers to this problem.

    I have the following Javascript that changes the images on screen as the dropdown menu chages:

    Javascript
    Code:
    function hullchangeimage()
    {
    if (!document.images)
    return
    document.images.hullpicture.src=
    document.hullgallery.changehull.options[document.hullgallery.changehull.selectedIndex].value
    }
    HTML Dropdown Menu:
    Code:
    <form name="hullgallery">
    <select name="changehull" size="1" onChange="hullchangeimage()">
    <OPTION value="Hull1">Hull1</option>
    <OPTION value="Hull2">Hull2</option>
    <OPTION value="Hull3">Hull3</option>
    </select>
    </form>
    HTML image SRC:
    Code:
    <img class="hullbuild" src="build_pics/Hull1.png" name="hullpicture" width="500" height="250">

    Problem is: this makes the picture the value of the select box, which for example is "Hull2", but the image scr is "build_pics/Hull2.png", so how do I add .png to the end of the value, and the folder infront, in the javascript. I can't change the values in the select options by adding .png as the value are needed for another function that requires just the value.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    <OPTION value="Hull1">Hull1</option>

    should be

    <OPTION value="build_pics/Hull1.png">Hull1</option>

    and similarly for the other values
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you felgal but

    I can't change the values in the select options by adding .png as the value are needed for another function that requires just the value.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    Code:
    onChange="hullchangeimage(this)">
    
    ....
    
    function hullchangeimage(sel){
       document.images.hullpicture.src= "build_pics/" + sel.value+ ".png";
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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