SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Backround image rotator in IE and other broswers

    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., "4*1000" is 4 seconds
    setTimeout("cycleBan()", 8*1000);
    }
    window.onload=cycleBan;

    </script>

    <table border="0" width="950" cellspacing="0" cellpadding="0" id="rotatingBg" background="../../images/backgrounds/ORCPH2010back4.jpg">
    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

  2. #2
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Indonesia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you give the example??

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Indonesia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i cant find you blog in your profile

  5. #5
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I sent you link by PM

  6. #6
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Indonesia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    at the middle your is blank??

  7. #7
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Indonesia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is a great. Can i apply in my blog (Blogger)?? but i just worked in IE

  9. #9
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
      }

  11. #11
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot. It works just as I wanted ...

    THANKS!!!

  12. #12
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Croatia
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •