How do I use a Combobox to change a displayed image on the screen

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jzieba
    New Member
    • Oct 2007
    • 5
    #1

    How do I use a Combobox to change a displayed image on the screen

    I found the following script that changes the text based on a user selection. I want to modify the code to change an image source based on the user selection.

    I have been told I can do this with document.getEle mentById(image) .src = "something.jpg" > but I am not sure how to incorporate this in the code.

    Thanks for any help you can provide. I am new to this.


    [HTML]<html><head><ti tle>whatever</title>
    <script type="text/javascript">

    var textBlocks = new Array(
    'Select a member',
    'Member 1 text.',
    'Member 2 text.');

    function changetext(elem id) {
    var ind = document.getEle mentById(elemid ).selectedIndex ;
    document.getEle mentById("displ ay").innerHTML= textBlocks[ind];
    }
    </script>

    </head><body>

    <form>
    <select id="whatever" onchange="chang etext('whatever ');">
    <option value="0">Selec t</option>
    <option value="1">Membe r1</option>
    <option value="2">Membe r2</option>
    </select><br>
    </form>
    <div id="display">Se lect a member</div>
    </body></html>[/HTML]
    Last edited by gits; Oct 11 '07, 06:34 PM. Reason: added code tags
    Tags: None
    • JosAH
      Recognized Expert MVP
      • Mar 2007
      • 11453
      #2
      Hi, this is a Javascript question, not a Java question. You posted your question in
      the Java Forum where it doesn't belong. I move your question to the Javascript
      forum. best of luck.

      kind regards,

      Jos

        Comment

        • jzieba
          New Member
          • Oct 2007
          • 5
          #3
          How do I use a Combobox to change a displayed image on the screen

          Please help! The following script changes text based on a user selection in a Combobox. I want to modify the code to change a displayed image based on the user selection. For example if the user picks the first choice new1.jpeg is displayed. If the user picks the second choice then new2.jpeg is displayed.

          I have been told I can do this with document.getEle mentById(image) .src = "something.jpg" > but I am not sure how to incorporate this in the code.

          Thanks for any help you can provide. I am new to this.



          Code: ( html4strict )
          [HTML]<html><head><ti tle>whatever</title>
          <script type="text/javascript">

          var textBlocks = new Array(
          'Select a member',
          'Member 1 text.',
          'Member 2 text.');

          function changetext(elem id) {
          var ind = document.getEle mentById(elemid ).selectedIndex ;
          document.getEle mentById("displ ay").innerHTML= textBlocks[ind];
          }
          </script>

          </head><body>

          <form>
          <select id="whatever" onchange="chang etext('whatever ');">
          <option value="0">Selec t</option>
          <option value="1">Membe r1</option>
          <option value="2">Membe r2</option>
          </select><br>
          </form>
          <div id="display">Se lect a member</div>
          </body></html>[/HTML]
          Last edited by acoder; Oct 15 '07, 02:06 PM. Reason: Added code tags

            Comment

            • dmjpro
              Top Contributor
              • Jan 2007
              • 2476
              #4
              Originally posted by jzieba
              Please help! The following script changes text based on a user selection in a Combobox. I want to modify the code to change a displayed image based on the user selection. For example if the user picks the first choice new1.jpeg is displayed. If the user picks the second choice then new2.jpeg is displayed.

              I have been told I can do this with document.getEle mentById(image) .src = "something.jpg" > but I am not sure how to incorporate this in the code.

              Thanks for any help you can provide. I am new to this.



              Code: ( html4strict )
              <html><head><ti tle>whatever</title>
              <script type="text/javascript">

              var textBlocks = new Array(
              'Select a member',
              'Member 1 text.',
              'Member 2 text.');

              function changetext(elem id) {
              var ind = document.getEle mentById(elemid ).selectedIndex ;
              document.getEle mentById("displ ay").innerHTML= textBlocks[ind];
              }
              </script>

              </head><body>

              <form>
              <select id="whatever" onchange="chang etext('whatever ');">
              <option value="0">Selec t</option>
              <option value="1">Membe r1</option>
              <option value="2">Membe r2</option>
              </select><br>
              </form>
              <div id="display">Se lect a member</div>
              </body></html>

              Use Code Tags buddy.
              Simply update the array with "Image Sources" and then assign the "src" property with that "Image Source".

              [code=javascript]
              var imageBlocks = new Array(
              'new1.jpg',
              'new2.jpg',
              'new3.jpg');

              var ind = document.getEle mentById(elemid ).selectedIndex ;
              document.getEle mentById("displ ay_image").src= imageBlocks[ind];


              [/code]

              [code=html]
              <img id = "display_image" >
              [/code]

              Debasis Jana

                Comment

                • jzieba
                  New Member
                  • Oct 2007
                  • 5
                  #5
                  Thanks

                  Thanks DMJPRO for all the help.
                  Last edited by jzieba; Oct 12 '07, 01:36 PM. Reason: Redundant

                    Comment

                    • jzieba
                      New Member
                      • Oct 2007
                      • 5
                      #6
                      Thanks very much to DMJPRO! The code is working but when I first call up the page the image source is "Not Available". How do I initialize the image name?

                      Thanks again and here is the new code:

                      [CODE=html]
                      <html><head><ti tle>whatever</title>
                      <script type="text/javascript">

                      var imageBlocks = new Array(
                      'new0.gif',
                      'new1.gif',
                      'new2.gif');

                      function changetext(elem id) {
                      var ind = document.getEle mentById(elemid ).selectedIndex ;
                      document.getEle mentById("displ ay_image").src= imageBlocks[ind];
                      }
                      </script>

                      </head><body>

                      <form>
                      <select id="whatever" onchange="chang etext('whatever ');">
                      <option value="0">Selec t a member</option>
                      <option value="1">John Zieba</option>
                      <option value="2">Conni e Zieba</option>
                      </select><br>
                      </form>
                      <img id="display_ima ge"></div>

                      </body></html>
                      [/CODE]
                      Last edited by acoder; Oct 15 '07, 02:04 PM. Reason: fixed code tag

                        Comment

                        • acoder
                          Recognized Expert MVP
                          • Nov 2006
                          • 16032
                          #7
                          You'll need to set the src of the image.

                          The proper way to use code tags would be:

                          &#91;CODE=javas cript]
                          JavaScript code goes here...
                          [/CODE]

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              Threads merged.

                                Comment

                                Previous template Next
                                Working...