SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change Background via Image Button

    Can someone help me out?
    I am trying to change the backgound image of a div (using code based on this).
    It worked fine initially, but when I change the button type to image it caused the background image to revert back after a second, or maybe the page is refreshing or something. Any ideas why?

    Here's my code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Change Background</title>
      
      <style type="text/css">
      #banner {
    	background-image:url(test1.jpg);
    	width:728px;
    	height:339px;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    }
      </style>  
      
    <script type="text/javascript">
      
      image1 = new Image();
      image1.src = "test1.jpg";
    
      image2 = new Image();
      image2.src = "test2.jpg";
      
      
      function ChangeBackground(background)
      {
        switch (background)
        {
          case 1:
            document.getElementById('banner').style.backgroundImage = 
                  'URL(test1.jpg)';
            break;
          case 2:
            document.getElementById('banner').style.backgroundImage = 
                   'URL(test2.jpg)';
            break;
          }
        }
      </script>
      
    
      
    </head>
    <body>
    
        <div id="banner">
          I am a div with a background image<br />
          If you click one of the buttons, my background will change.
        </div>
    
    
      <form id="frmTest" name="frmTest" action="" method="get">
        
        <input type="image" src="button1.jpg" id="btnDo1" 
                  name="btnDo1" onclick="ChangeBackground(1)" 
                  value="Click to change to Background 1" />
        
        <input type="image" src="button2.jpg" id="btnDo2" 
                  name="btnDo2" onclick="ChangeBackground(2)" 
                  value="Click to change to Background 2" />
      </form>
    </body>
    </html>

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there dreado,

    if you only require the buttons to call the javascript function, then just remove the form tags.
    If you still feel that you want to keep the buttons within the form element then you will need to add...

    onsubmit="return false"
    ...to it.

    coothead

  3. #3
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hehe removing the form tags fixed, it
    I did wonder why they were there, but just asumed there was a good reason.
    Thank you.

  4. #4
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, you're welcome.


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
  •