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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Background Image with Dropdown IE

    Hi this code works fine in Fireox but not in IE.

    Any help would be greatly appreciated.

    Thanks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    
    <script type="text/javascript">
    function changebg(my)
    {
    document.getElementById("changeimg").style.backgroundImage ='url('+ my.id +')';
    }
    </script>
    
    </head>
    
    <body>
    
    <div style="position:absolute; left:620px; top:120px; font-family:Arial; font-size:11pt;">
    Select Curtains:
    <select>
      <option id="images/blue.jpg" onclick="changebg(this)">Blue</option>
      <option id="images/red.jpg" onclick="changebg(this)">Red</option>
    </select>
    
    </div>
    
    <div id="changeimg" style="border: 1px solid black;width:594px;height:530px;background-image:url(images/empty_room.jpg);background-repeat:no-repeat;">
    
    </div>
    
    
    </body>
    
    </html>

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Here's your code with minor changes.
    I've removed the onclick event in the options elements and added an onchange event to the select element.
    I also changed the "my" proprty used in "function changebg" from id to value.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    
    <script type="text/javascript">
    function changebg(my)
    {
    
    document.getElementById("changeimg").style.backgroundImage ='url("'+ my.value +'")';
    }
    </script>
    
    </head>
    
    <body>
    
    <div style="position:absolute; left:620px; top:120px; font-family:Arial; font-size:11pt;">
    Select Curtains:
    <select onchange="changebg(this)">
      <option value="images/blue.jpg">Blue</option>
      <option value="images/red.jpg">Red</option>
    </select>
    
    </div>
    
    <div id="changeimg" style="border: 1px solid black;width:594px;height:530px;background-image:url(images/empty_room.jpg);background-repeat:no-repeat;">
    
    </div>
    tested in ie7 and ff3

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sweet. Thanks so much!


  •  

    Posting Permissions

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