...

View Full Version : My Random Image Rotator code doesn't work in different browsers



Carolynne
01-30-2005, 07:55 PM
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!!

Puffin the Erb
01-30-2005, 08:15 PM
The correct way to reference the background is :

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

Carolynne
01-30-2005, 08:32 PM
Thanks so much for your help and your rapid response.

Puffin the Erb
01-30-2005, 08:49 PM
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. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum