Hi All Please can someone explain this to me and offer a solution? I'm relatively new to Javascript but have got some excellent books and online resources. Wrote a script to handle banner rotation which works perfectly in IE but not in Mozilla (very strange). So I copied the script "Displaying a random image" from the book (Javascript for the worldwide web; http://www.chalcedony.com/javascrip...ipts/index.html) and the error still persists, only in Mozilla. The error is this: Despite naming the <img> tags uniquely, and specifying "document.imgName.src=adImages[thisAd]" more than one image is changed. there is a cyclical pattern to this error too. Here is the page source: <html> <head> <title>Rotating Banner Problem</title> <script type="text/javascript" language="Javascript"> <!-- Hide script from old browsers adImages = new Array("images/banner/one.gif","images/banner/two.gif","images/banner/three.gif") imgCt = adImages.length firstTime = true function rotate() { if (document.images) { if (firstTime) { thisAd = Math.floor((Math.random() * imgCt)) firstTime = false } else { thisAd++ if (thisAd == imgCt) { thisAd = 0 } } document.Bthree.src=adImages[thisAd] setTimeout("rotate()", 3 * 1000) } } // End hiding script from old browsers --> </script> </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" name="Bone" /> <img src="images/banner/seven.gif" width="92" height="92" name="Btwo" /> <img src="images/banner/eight.gif" width="92" height="92" name="Bthree" /> <img src="images/banner/nine.gif" width="92" height="92" name="Bfour" /> <img src="images/banner/ten.gif" width="92" height="92" name="Bfive" /> <img src="images/banner/eleven.gif" width="92" height="92" name="Bsix" /> <img src="images/banner/twelve.gif" width="92" height="92" name="Bseven" /> <img src="images/banner/one.gif" width="92" height="92" name="Beight" /> <img src="images/banner/two.gif" width="92" height="92" name="Bnine" /> </div> </body> </html>
Try giving the image a unique ID and use document.getElementById instead. And please use or [code=javascript] wrappers when posting code. EDIT: Your code seems to work for me on both browsers. Code (markup):
Yeh absolutely right. Your code works on both browser. Can anybody tell me the difference between using object in object style (like document.images.BThree.src) and getElementById.