Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2005
    Location
    Northern California
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post

    Question My Random Image Rotator code doesn't work in different browsers

    Let me preface this (and apologize) by saying I know nothing about Java Script coding. A helpful soul in another forum supplied me with some code, however, I think he got too busy (the broken collar bone probably didn't help either) to work out some of the bugs with me.

    Here is my problem. I wanted a random image rotator on the home page of this site, http://www.thescruffydog.com, so that everytime the homepage was visited a different photo of a dog would appear. The images must appear as background images in a table for various design reasons. The code works in Internet Explorer (on the PC, not sure about MAC), but it doesn't work in Netscape 7.2 or Firefox. In Netscape and Firefox the table cell is blank.

    Does anyone know how to get this to work in multiple browsers?

    Here is the script:

    In the head tag of my page:

    <script>
    function EM_pickImage() {
    image_array = new Array('home-dog1.jpg','home-dog2.jpg','home-dog3.jpg','home-dog4.jpg','home-dog5.jpg','home-dog6.jpg','home-dog7.jpg');


    now = new Date()
    sec = now.getMilliseconds();
    useImage = image_array[0];
    for (i=0; i<image_array.length; i++) {
    if (sec > i*(1000/image_array.length)) {
    useImage = image_array[i];
    }
    }
    img_splash.style.backgroundImage = 'url(images/' + useImage + ')';
    }

    </script>

    In the body tag:

    <body onLoad="EM_pickImage()">

    and in my table:

    <tr>
    <td colspan="2"><table width="620" id="img_splash" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="368" rowspan="6"><img src="images/spacer.gif" alt="Dog Photos" width="368" height="359"></td>

    Thank you in advance for all your help!!
    Last edited by Carolynne; 01-30-2005 at 07:02 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    The correct way to reference the background is :

    document.getElementById('img_splash').style.backgroundImage = 'url(images/' + useImage + ')';

  • #3
    New Coder
    Join Date
    Jan 2005
    Location
    Northern California
    Posts
    13
    Thanks
    1
    Thanked 1 Time in 1 Post

    Thumbs up It's working

    Thanks so much for your help and your rapid response.

  • #4
    Regular Coder
    Join Date
    Oct 2004
    Posts
    168
    Thanks
    0
    Thanked 5 Times in 5 Posts
    No problem.
    Using getElementById() is the way to go - it's part of the W3C DOM standard and supported in Netscape 6+, IE5+ and nearly all modern browsers that support JavaScript.


  •  

    Posting Permissions

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