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>