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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Change Background</title>
  <style type="text/css">
  #banner {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
<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 = 
      case 2:
        document.getElementById('banner').style.backgroundImage = 


    <div id="banner">
      I am a div with a background image<br />
      If you click one of the buttons, my background will change.

  <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" />