Hi there shsh_shah,
I did not go out at my expected time so I had the opportunity to amend the code while waiting. 
[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://mysite.orange.co.uk/azygous/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
text-align:center;
margin-top:50px;
}
#myimage,#myimage2 {
width:100px;
height:100px;
border:3px double #000;
cursor:pointer;
}
#myimage1 {
width:200px;
height:200px;
border:3px double #000;
cursor:pointer;
}
</style>
<script type="text/javascript">
var pics=['anim.gif','anim1.gif','anim2.gif','anim3.gif','anim4.gif','anim5.gif'];
var pics1=['ten_quid.jpg','girl.jpg','dog.jpg','blood.jpg','grap.jpg','ball_shad.jpg'];
var pics2=['buddha.jpg','clouds.jpg','apple.jpg','banana.jpg','aaa.jpg'];
var count=0;
var speed=1000; /*this is set for 1 second, edit to suit requirements*/
var timer;
window.onload=function(){
document.getElementById('myimage').onmouseover=function() {
rotateImage(this,pics);
}
document.getElementById('myimage1').onmouseover=function() {
rotateImage(this,pics1);
}
document.getElementById('myimage2').onmouseover=function() {
rotateImage(this,pics2);
}
}
function rotateImage(obj,ary) {
obj.onmouseout=function() {
count=0;
clearTimeout(timer);
obj.src=ary[0];
return;
}
count++;
if(count==ary.length) {
count=0;
}
obj.src=ary[count];
obj1=obj;
ary1=ary
timer=setTimeout('rotateImage(obj1,ary1)',speed);
}
</script>
</head>
<body>
<div id="container">
<img id="myimage" src="anim.gif" alt="">
<img id="myimage1" src="ten_quid.jpg" alt="">
<img id="myimage2" src="buddha.jpg" alt="">
</div>
</body>
</html>
[/color]
coothead