I'm trying to update my employer's homepage image by adding a menu underneath as well as rotating images. What we want to accomplish is to make the images rotate while also allowing customers to click on thumbnails to automatically go to other images in the rotation. I've been able to get the rotation to work, and I've been able to get the menu to work. However, when you click on the menu thumbnails, the image stops rotating and remains on the single image. Can anyone help me figure out how to get the images to continue rotating, even after the thumbnail has been clicked? I'd also like to add links to the images, as well as make the transition between images a crossfade. I've been able to make a version that does crossfade, but then the menu doesn't work.

Here are the pages as I have them so far.

http://www.3riversarchery.com/RotationTest2.asp

http://www.3riversarchery.com/SlideShow1.asp

Any assistance would be greatly appreciated. Here is the code I'm currently using... it's a mish-mash of code I found through several google searches, so there could be errors or incorrect formatting. My apologies.



<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return;
}
</script>

<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="http://www.3riversarchery.com/images/misc/June2011TargetArchery.jpg"
var image2=new Image()
image2.src="http://www.3riversarchery.com/images/misc/June2011Bowfishing.jpg"
var image3=new Image()
image3.src="http://www.3riversarchery.com/images/misc/June2011Eichler.jpg"
var image4=new Image()
image4.src="http://www.3riversarchery.com/images/misc/June2011ArrowWhiz.jpg"
//-->
</script>

</head>

<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>


<div id="image1">
<img src="" name="Rotating" id="Rotating1" width=560 height=254>
</div>


<br>

<a id="One" href="#" onClick="changeIt('http://www.3riversarchery.com/images/misc/June2011TargetArchery.jpg',' image1');"><img src="http://www.3riversarchery.com/images/misc/June2011targetbut.jpg" border="0"></a>
<a id="two" href="#" onClick="changeIt('http://www.3riversarchery.com/images/misc/June2011bowfishing.jpg','ima ge1');"><img src="http://www.3riversarchery.com/images/misc/June2011bowfishbut.jpg" border="0"></a>
<a id="three" href="#" onClick="changeIt('http://www.3riversarchery.com/images/misc/June2011eichler.jpg','image1 ');"><img src="http://www.3riversarchery.com/images/misc/June2011eichlerbut.jpg" border="0"></a>
<a id="four" href="#" onClick="changeIt('http://www.3riversarchery.com/images/misc/June2011ArrowWhiz.jpg','imag e1');"><img src="http://www.3riversarchery.com/images/misc/June2011ArrowWhizbut.jpg"bor der="0"></a>




<script language="JavaScript">
var ImageArr1 = new Array("http://www.3riversarchery.com/images/misc/June2011TargetArchery.jpg", "http://www.3riversarchery.com/images/misc/June2011bowfishing.jpg", "http://www.3riversarchery.com/images/misc/June2011eichler.jpg", "http://www.3riversarchery.com/images/misc/June2011arrowwhiz.jpg");
var ImageHolder1 = document.getElementById('Rotating1');



function RotateImages(whichHolder,Start)
{
var a = eval("ImageArr"+whichHolder);
var b = eval("ImageHolder"+whichHolder);
if(Start>=a.length)
Start=0;
b.src = a[Start];
window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",5000) ;
}

RotateImages(1,0);
RotateImages(2,0);
RotateImages(3,0);
</script>