SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,665
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    show image dynamically?

    I have a combo box with the paths of multiple images, how do I make it so that using the onChange() event, the image selected then would show up beside the combo box, so people could see the image they are selecting?

    Thanks

    Heres my combo box
    HTML Code:
    <select name="name" id="name" size="1">
    <option value="face.JPG002_thb.jpg">face.JPG002_thb.jpg</option>
    <option value="brooke1.JPG002_thb.jpg">brooke1.JPG002_thb.jpg</option>
    <option value="sheets.JPG002_thb.jpg">sheets.JPG002_thb.jpg</option>
    </select>
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    JS:
    <script type="text/javascript">
    window.onload = init;
    
    function init() {
    var placeholder = document.createElement('div');
    var placeholderImg = document.createElement('img');
    placeholderImg.href = 'placeholder.jpg';
    placeholder.appendChild(placeholderImg);
    document.body.appendChild(placeholder);
    var foo = document.getElementById('foo');
    foo.onchange = function() {
    placeholderImg.href = this.value;
    }
    }
    
    HTML:
    <select name="foo" id="foo">
    <option value="test.jpg">test</option>
    </select>
    This would probably do the job.. let me know if it works (havent tested - works in my head)

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,665
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    nothing...
    heres the page
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org\tR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>LVASP: Set featured pic.</title>
    <script type="text/javascript">
    window.onload = init;
    
    function init() {
    var placeholder = document.createElement('div');
    var placeholderImg = document.createElement('img');
    placeholderImg.href = '/images/default.jpg';
    placeholder.appendChild(placeholderImg);
    document.body.appendChild(placeholder);
    var name = document.getElementById('name');
    name.onchange = function() {
    placeholderImg.href = this.value;
    }
    }
    </script>
    </head>
    
    <body>
    <form action="" method="post">
    <div style="width:600px; margin:0 auto">
    <label for="name">Select The Featured Picture for Administrator:</label>
    <select name="name" id="name" size="1">
    <option value="face.JPG002_thb.jpg">face.JPG002_thb.jpg</option>
    <option value="brooke1.JPG002_thb.jpg">brooke1.JPG002_thb.jpg</option>
    <option value="sheets.JPG002_thb.jpg">sheets.JPG002_thb.jpg</option>
    </select>
    </div>
    <div style="width:200px; margin:0 auto">
    <input type="submit" value="Set Featured Pic" name="set" \>
    </div>
    </form>
    </body>
    </html>
    "Oh, and Jenkins--apparently your mother died this morning."

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops.. change both instances of .href to .src


Bookmarks

Posting Permissions

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