Image load problems across platforms

I am having some problems with javascript working across platforms. I have had the following results with the following code:

Code worked as expected on: Mac OSX with Safari, Mac OSX with FireFox, MacOSX with IE 5.2, Windows 2K with FireFox

Code did not work as expected on: Windows 2K with IE 5.0, Windows 2K with IE 6.0

The problem code (versions of this code exist in three places on the page) is as follows:
function left() {
if (imageNum > 0) {
imageNum--;
image = new Image();
image.src = tFileArray[imageNum];
--> image.onload = changeImg("img1",image.src);
image.src = tFileArray[imageNum+1];
image.onload = changeImg("img2",image.src);
image.src = tFileArray[imageNum+2];
image.onload = changeImg("img3",image.src);
image.src = tFileArray[imageNum+3];
image.onload = changeImg("img4",image.src);
}
}

The function “Left” is called when a user clicks on an unrelated image (a left arrow) and should scroll 4 images (these images are named “img1,img2,img3,img4” in the page. “tFileArray[]” is a collection of thumbnail file names (generally something like “tBlue4.jpg”). "imageNum" is a global variable that tracks image scrolling. The changeImg function is as follows:

function changeImg(id, image) {
eval("document."+id+".src=\""+image+"\"");
}

Originally, in the Left function, I had the eval statement instead of the function call, but this did not work either (although it did work on the Mac and with Firefox on Windows 2K).

In IE, I get a “Not Implemented” error at the line with the arrow on it. The first image (img1) is changed, but none of the later images are changed.

The page can be viewed at http://www.idlelife.net/portfolio/index.php. Please, let me know if I have left out any crucial information. Any suggestions would be appreciated.

I haven't looked at your page but looking at your codes above I would think your attempt to pass a function arguement as a string is breaking the onload event...

You could try using:
image.onload = new Function('changeImg("img1",image.src)');

But that gets a little tricky so I would probably go with:
image.onload = changeImg(1,image.src);

With a slight change to your changeImg function:

function changeImg(id, image) {
document.images['img'+id].src = image;
}

Then again, I would think there must be easier ways to change the source of several images simultaneously...

.....Willy

I have simplified the code quite a bit. The functions now look like this:

function left() {
if (imageNum > 0) {
imageNum--;
imageNum2 = imageNum + 1;
imageNum3 = imageNum + 2;
imageNum4 = imageNum + 3;
eval("document.img1.src=Imaget"+imageNum+".src");
eval("document.img2.src=Imaget"+imageNum2+".src");
eval("document.img3.src=Imaget"+imageNum3+".src");
eval("document.img4.src=Imaget"+imageNum4+".src");
}
}

This seems to work fine on a Mac using any browser (Safari, FireFox, IE). However, using IE on windows still gives me a problem. When the function is run, all of the associated thumbnails (img1, img2, etc.) disappear. However, if you right click where the image is supposed to be and choose "Show Picture" the correct image comes up. To see this in action go to www.idlelife.net/portfolio/index.php.

Does anyone know why the image does not show up initially when using IE on Windows?

Thanks in advance for your help.