Backround image rotator in IE and other broswers

**Rocket Racer** · Jan 20, 2010 07:49

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:

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.

Any help is most appreciated

**atozet** · Jan 20, 2010 07:50

can you give the example??

**Rocket Racer** · Jan 20, 2010 08:00

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

**atozet** · Jan 20, 2010 08:13

i cant find you blog in your profile

**Rocket Racer** · Jan 20, 2010 08:18

I sent you link by PM

**atozet** · Jan 20, 2010 08:39

at the middle your is blank??

**Rocket Racer** · Jan 20, 2010 08:44

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

<table border="0" width="950" cellspacing="0" cellpadding="0" id="rotatingBg" background="../../images/backgrounds/ORCPH2010back4.jpg">

or did I missundertood your question?

**atozet** · Jan 20, 2010 08:54

Is a great. Can i apply in my blog (Blogger)?? but i just worked in IE

**Rocket Racer** · Jan 20, 2010 11:54

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

**lnhicks** · Jan 20, 2010 16:22

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.

Code:

document.getElementById("rotatingBg").style.background = "url("+bannerImg[newBanner]+")";

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:

Code:

  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }

**Rocket Racer** · Jan 21, 2010 01:57

Thanks a lot. It works just as I wanted ...

THANKS!!!

**Rocket Racer** · Jan 26, 2010 00:32

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)?

Here is the link

http://www.scor.hr/regate/2010e/orcph.htm

Thanks in advance

**lnhicks** · Jan 26, 2010 05:02

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:

Code:

<!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.

Anyway, see how it looks after validation.

**Rocket Racer** · Jan 27, 2010 08:28

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.

**lnhicks** · Jan 27, 2010 16:06

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.

**Rocket Racer** · Jan 28, 2010 01:27

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.

User Tag List

Thread: Backround image rotator in IE and other broswers

Thread Tools

Display

Backround image rotator in IE and other broswers

Bookmarks

Bookmarks

Posting Permissions