How To Flip An Image

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="? 2005 Roderick Divilbiss">
<title>How To Flip An Image</title>
</head>

<body>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="300" id="table1" height="250">
  <tr>
    <td id="bottomImage" background="images/image2.jpg" valign="top"><img id="displayImage" border="0" src="images/image1.jpg"></td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
var iwidth = document.getElementById('displayImage').getAttribute('width');
var iheight = document.getElementById('displayImage').getAttribute('height');
var topImage=1;
setTimeout("flip()",1000);

function flip() {
  iheight=parseInt(iheight/2);
  document.getElementById('displayImage').setAttribute('height',iheight);
  document.getElementById('displayImage').setAttribute('width',iwidth);
  if (iheight<1) {
    if (topImage==1) {
      document.getElementById('displayImage').setAttribute('src','images/image2.jpg');
      document.getElementById('displayImage').setAttribute('height',250);
      document.getElementById('bottomImage').setAttribute('background','images/image1.jpg');
      topImage=2;
    } else {
      document.getElementById('displayImage').setAttribute('src','images/image1.jpg');
      document.getElementById('displayImage').setAttribute('height',250);
      document.getElementById('bottomImage').setAttribute('background','images/image2.jpg');
      topImage=1;
    }
    iheight = 250;
    alert('Ready to repeat: Image '+topImage);
  }
  setTimeout("flip()",500);
}
</script>
</body>

</html>
How can you flip an image and show the image below (then repeat)?
