I found on this site very good script for rotating images in table background. It was posted more then 2 years ago. Here it is:
<script type=“text/javascript”>
var bannerImg = new Array();
// Enter the names of the images below
bannerImg[0]=“…/…/images/backgrounds/ORCPH2010back1.jpg”;
bannerImg[1]=“…/…/images/backgrounds/ORCPH2010back2.jpg”;
bannerImg[2]=“…/…/images/backgrounds/ORCPH2010back3.jpg”;
bannerImg[3]=“…/…/images/backgrounds/ORCPH2010back4.jpg”;
bannerImg[4]=“…/…/images/backgrounds/ORCPH2010back5.jpg”;
var newBanner = 0;
var totalBan = bannerImg.length;
function cycleBan() {
newBanner++;
if (newBanner == totalBan) {
newBanner = 0;
}
document.getElementById(“rotatingBg”).background = bannerImg[newBanner];
// set the time below for length of image display
// i.e., "41000" is 4 seconds
setTimeout(“cycleBan()”, 81000);
}
window.onload=cycleBan;
However, it works perfectly only in IE, while it does not work in any other browser. I understood that problem is with document.getElementById but I could not find any solution.
Sorry, but as I am new to this Forum and have less than 5 posts I can not post any URL here, but script and html part are copied completely in my first post
No, in IE there are 5 images rotating below title “ORC Otvoreno prvenstvo Hrvatske …”, while in other browsers rotator in not working any only one picture set up as table background in html is shown
Yes, you may I apply script just I did when I found it on this site, but I started this topic because it works in IE only and I need help how it can be modified to work with other browsers
The main issue: in the JavaScript, use background as a property of the style object, and ensure you “break open” the url string so the script can “see” the variable for the image array element in there.
Minor issue: the way the JavaScript is arranged, it is going to immediately swap to your second image when the page is initially shown, regardless of what you have in the markup. If you want the first image to be seen first, move the following lines to immediately below the setTimeout line:
newBanner++;
if (newBanner == totalBan) {
newBanner = 0;
}
The script is working perfect now, but there is one more thing I would like to improve. How to get rid of “blank space” where only background is shown between two picture, i.e. to have transition directly form one to the next picture (effect are not necessary, but desirable if possible)?
Yes, in IE8, I am seeing about a half second delay in between image changes, during which the background colour shows.
There’s a few markup validation errors which you should look at - it especially needs a doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The others, although minor and perhaps not affecting this problem, should also be addressed. I am wondering though if this problem is mainly just stemming from the use of tables for layout. IE is pretty slow at rendering tables, and here the image is a background of the entire table.
Thanks, I added validation code as you suggested but it looks that it did not improved it lot. My first thought was that something within the image rotator script can be adjusted to avoid “blank” transition between two images.
That’s a very basic image script for swapping background images - there are no adjustments possible or needed, and it works instantly where a simple div is used as the canvas. The problem here is that an entire table is being used as the canvas, so the browser has to re-render the entire table each time it does an image swap, hence the delay.
You could try setting the image as a background to a single table cell, instead of to the whole table. That’s how it is usually done when tables are used.
Thanks, I put it in table backgorund as I wanted to have it in backgound in all elements including inline frame which is loading different pages and menu line. Anyway, I can leave with this short delay between pictures.
