Q1477 How do I make certain images in a page change one after another, and when then the mouse is moved the original image is shown and the code no longer executes?

<script language="JavaScript"><!--
function myVoid() {;}

speed = 10; // miliseconds

if (document.images) { // preload
   numberOfFrames = 10;
   theImage = new Array(numberOfFrames);
   for (i=0;i<numberOfFrames;i++) {
      theImage[i].src = 'img'+i+'.gif'; /* images are named img0.gif - img9.gif */
   }
}
currentImage = -1;
animId = '';

function animate() {
   if (!document.images) return;
   document.images["image1"].src = currentImage++;
   if (currentImage > numberOfFrames) currentImage = 0;
   animId = setTimeout('animate()',speed);
}

function stopAnimation() {
   clearTimeout(animId);
      theImage[i].src = 'image.gif';
}
//--></script>

<a href="javascript:myVoid()" onClick="return false" onMouseOver="animate()" onMouseOut="stopAnimation()"><img src="image.gif" name="image1"></a>