Okay, this is not at all optimized, nor is it pretty. But it works. Or at least, it seems to work here at home:
<html>
<head>
</head>
<body onLoad="initScroll();">
<div id="imagediv" style="position:absolute;top:10;left:100;">
<p><a id="img0link" target="_new" href="link1.html"><img id="img0" src="img1.jpg" style="border:0px;" /></a><p />
<p><a id="img1link" target="_new" href="link2.html"><img id="img1" src="img2.jpg" style="border:0px;" /></a><p />
<p><a id="img2link" target="_new" href="link3.html"><img id="img2" src="img3.jpg" style="border:0px;" /></a><p />
<p><a id="img3link" target="_new" href="link4.html"><img id="img3" src="img4.jpg" style="border:0px;" /></a><p />
<p><a id="img4link" target="_new" href="link5.html"><img id="img4" src="img5.jpg" style="border:0px;" /></a><p />
</div>
<script language = "javascript">
var numOfImages = 5;
var initialDelay = 2000; // this is in milliseconds;
var delayBetweenSwap = 2000; // So is this;
var globalCount = 1;
// Initialize these with the total number of images
var imgArray = new Array(5);
var linkArray = new Array(5);
// Fill this arrasy with the image srcs themselves
imgArray[0] = "img1.jpg";
imgArray[1] = "img2.jpg";
imgArray[2] = "img3.jpg";
imgArray[3] = "img4.jpg";
imgArray[4] = "img5.jpg";
// fill this array with the href targets that you want the images to link to
linkArray[0] = "link1.html";
linkArray[1] = "link2.html";
linkArray[2] = "link3.html";
linkArray[3] = "link4.html";
linkArray[4] = "link5.html";
function initScroll() {
/*
Function just initializes the swap routine
*/
var initialRun = setTimeout("doSwap()",initialDelay);
}
function doSwap() {
/*
This is the meat of the swapping routine
*/
/*
First things first, iterate through our images
and change their source and their href
*/
for (var i=0;i<numOfImages;i++) {
var element = document.getElementById("img"+i);
var link = document.getElementById("img"+i+"link");
/*
Have to make sure we wrap around after we reach the max number of images
*/
var nextImg = i + globalCount;
if (nextImg >=numOfImages) {
nextImg = nextImg-numOfImages;
}
/*
Swap images and hrefs
*/
var newImgSrc = imgArray[nextImg];
var newImgLink = linkArray[nextImg];
element.src = newImgSrc;
link.href = newImgLink;
}
if (globalCount > numOfImages) {
globalCount = 0;
}
globalCount++;
setTimeout("doSwap()",delayBetweenSwap);
}
</script>
</body>
</html>
Cut and paste that into an HTML file, make yourself five images called img1.jpg, img2.jpg,img3.jpg, img4.jpg and img5.jpg, put them in the same folder as the html file and test it out.
This isn't a scroller, it's a rotational swapper. It just swaps the image above with the one below, running all the way down the list. Let me know if you have any problems with it
