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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,556
    Thanks
    75
    Thanked 105 Times in 104 Posts

    Display image with select box

    I am looking for a piece of code that can display an image depending on the selection of a select box.
    I'd like for it to default to "Select Class" and then have a drop down of 5 choices. This is what I currently have:

    Code:
    <li>  <b>Class</b><br>
              <select name="class">
    <option value="choose">Select Class</option>
              <option value="knight">Knight</option>
              <option value="enchantress">Enchantress</option>
              <option value="archer">Archer</option>
              <option value="thief">Thief</option>
    <option value="necromancer">Necromancer</option>
              </select>
              </li>
    I'd greatly appreciate any help and/or if you could refer me somewhere with this code. Thank you
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,694
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Quote Originally Posted by myfayt View Post
    I'd like for it to default to "Select Class" ....
    Have no ides what this means, but here is one way of showing an image;
    Code:
    <body>
    <b>Class</b><br>
    <select id="select_class" onchange="do_image(this.value);">
    	<option>Select Class</option>
    	<option value="knight">Knight</option>
    	<option value="enchantress">Enchantress</option>
    	<option value="archer">Archer</option>
    	<option value="thief">Thief</option>
    	<option value="necromancer">Necromancer</option>
    </select>
    <div><img id="image_here" src="" /></div>
    
    <script type="text/javascript">
    function do_image(icon){
    	document.getElementById("image_here").src = "images/"+icon+".jpg";
    }
    </script>
     </body>
    This
    Code:
    "images/"+icon+".jpg";
    is images/; where I store the images (a folder), icon; the first part of the image name and ".jpg"; the type of image.
    If your images are not all the same kind(.jpg) or not all in the same folder you can make the <option value="thief"> contain all the information:
    <option value="img/thief.png">
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    myfayt (03-19-2014)

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,556
    Thanks
    75
    Thanked 105 Times in 104 Posts
    Thank you very much. This Javascript stuff is hard

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    Quote Originally Posted by myfayt View Post
    I'd like for it to default to "Select Class" ...
    Code:
    <option value="choose" selected="selected">Select Class</option>
    If you're in HTML4 or HTML5, just use the selected keyword. If you're using XHTML you need selected="selected".

  • Users who have thanked kansel for this post:

    myfayt (03-19-2014)

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by kansel View Post
    Code:
    <option value="choose" selected="selected">Select Class</option>
    If you're in HTML4 or HTML5, just use the selected keyword. If you're using XHTML you need selected="selected".
    It doesn’t hurt to have an attribute value in HTML, too, even if it’s technically valid to have empty attributes.

  • #6
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,556
    Thanks
    75
    Thanked 105 Times in 104 Posts
    What would selected do? as for attribute value do you mean value=0 ?
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by myfayt View Post
    What would selected do? as for attribute value do you mean value=0 ?
    He means selected = "selected" is valid and does no harm, although in HTML just selected is sufficient, at the mere presence of the selected attribute sets its value to true, so the "= selected" part is redundant.
    Last edited by Philip M; 03-19-2014 at 02:13 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,556
    Thanks
    75
    Thanked 105 Times in 104 Posts
    Thanks again
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #9
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I know this is done, but I have a question.

    Is it okay to name/id an element using a reserved word like "class"? I did notice that sunfighter renamed the id to "select_class".
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #10
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,694
    Thanks
    25
    Thanked 657 Times in 656 Posts
    @WolfShade,
    I don't think there are any reserved words in HTML. The OP used an attribute titled "name" which is not useful here (mostly needed in the form tags) so I eliminated it and added an ID, which might be needed, and chose not to call it "class", because I thought it was confusing. "select_class" is probably just as confusing. Should have used "myselect" like I always do.
    Last edited by sunfighter; 03-19-2014 at 03:58 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    You should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.
    And of course you may not give a variable a name which is a Javascript keyword or event such as alert, case, char, confirm, false, int, null, onload, return, this, void, window, and so on.
    Also avoid words such as description, author, keyword and generator which may appear in META tags.
    (and *NEVER* use the name "submit", because then your JS code can't call document.formname.submit() if you ever need to).

    Both his parents played football. I say both his parents, his mother included. - Commentator BBC Radio 5 Live

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    @Philip M, I thought so.

    And I have learned (the difficult way, personal experience, sadly more than once) to never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, never, ever name/id anything "submit". Always use "submitBtn", or a reasonable facsimile, thereof.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #13
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,556
    Thanks
    75
    Thanked 105 Times in 104 Posts
    A new problem has come up. When the page is loaded it shows the default [Select Class] but it has a problem image. Is it possible to either not shown an image if nothing is selected or can it load a default image on page load?

    It works fine when clicking through the selections but even with an image for Select Class it still shows broken until I select something else and come back to it.

    Code:
     <li>  <select id="select_class" onchange="do_image(this.value);">
    	<option value="choose" selected="selected">Select Class</option>
    	<option value="knight">Knight</option>
    	<option value="enchantress">Enchantress</option>
    	<option value="archer">Archer</option>
    	<option value="thief">Thief</option>
    	<option value="necromancer">Necromancer</option>
    </select>
    <div><img id="image_here" src="" /></div>
    
    <script type="text/javascript">
    function do_image(icon){
    	document.getElementById("image_here").src = "http://www.codingforums.com/images/"+icon+".png";
    }
    </script>

    Display image with select box-selectclass.jpg
    Last edited by myfayt; 03-20-2014 at 02:16 AM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #14
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    Code:
     <li>  <select id="select_class" onchange="do_image(this.value);">
    	<option value="choose" selected="selected">Select Class</option>
    	<option value="knight">Knight</option>
    	<option value="enchantress">Enchantress</option>
    	<option value="archer">Archer</option>
    	<option value="thief">Thief</option>
    	<option value="necromancer">Necromancer</option>
    </select>
    <div><img id="image_here" src="" /></div>
    
    <script type="text/javascript">
    function do_image(icon){
      if(icon !== "choose" && icon !== ""){
    	document.getElementById("image_here").src = "http://www.codingforums.com/images/"+icon+".png";
      }
    }
    </script>
    Added an if statement to ignore when the first option is selected. (Will ignore if value="choose" or value="" which is common for the first option.)

  • #15
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,694
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Remove src="" from the img tag to get rid of the 'missing image' image.

    can it load a default image on page load?
    Only if you give the img a src value.
    Last edited by sunfighter; 03-20-2014 at 02:10 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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