Please help! Very strange problem

Discussion in 'JavaScript' started by Ramphiophis, Nov 17, 2006.

0
  1. #1
    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>
    Code (markup):

     
    Ramphiophis, Nov 17, 2006 IP