Please help! Very strange problem

Ramphiophis

Nov 17th 2006, 5:11 am

Please help. I want to select a random image and replace it with another random image every 3 seconds. Problem is that in Mozilla Firefox it changes several images simultaneously despit using getElementById. I have no idea how to get around this problem. Please can someone explain this to me?

Here follows the html javascript for the page:

<html>
<head>
<title>Rotating Banner Problem</title>
</head>
<body style="background-color: rgb(171, 157, 110); margin-left: 0px; margin-top: 0px;" onload="rotate()" marginheight="0" marginwidth="0">

<div id="topBanner" style="position: absolute; left:230px; top: 0px; height:100px; z-index: 99;">
<img src="images/banner/six.gif" width="92" height="92" id="B1" />
<img src="images/banner/seven.gif" width="92" height="92" id="B2" />
<img src="images/banner/eight.gif" width="92" height="92" id="B3" />
<img src="images/banner/nine.gif" width="92" height="92" id="B4" />
<img src="images/banner/ten.gif" width="92" height="92" id="B5" />
<img src="images/banner/eleven.gif" width="92" height="92" id="B6" />
<img src="images/banner/twelve.gif" width="92" height="92" id="B7" />
<img src="images/banner/one.gif" width="92" height="92" id="B8" />

<img src="images/banner/two.gif" width="92" height="92" id="B9" />

</div>

<script type="text/javascript" language="Javascript">

randImages = new Array("images/banner/one.gif","images/banner/two.gif","images/banner/three.gif","images/banner/four.gif","images/banner/five.gif","images/banner/six.gif","images/banner/seven.gif","images/banner/eight.gif","images/banner/nine.gif","images/banner/ten.gif","images/banner/eleven.gif","images/banner/twelve.gif")

var preBuffer = new Array()

for (i = 0; i < randImages.length; i++){
preBuffer[i] = new Image()
preBuffer[i].src = randImages[i]
}

imgCt = randImages.length

if (document.getElementById) {
var imgSpot = new Array()
for (i = 1; i < 10; i++){
imgID = "B" + i
imgSpot[i] = document.getElementById(imgID)
}
}

function rotate() {

if (document.images) {
randPic = Math.floor((Math.random() * imgCt))
imgPos = Math.floor((Math.random() * 9)) + 1

imgSpot[imgPos].src=randImages[randPic]
setTimeout("rotate()", 3 * 1000)
}

}
</script>
</body>
</html>