Having Problems Displaying background images in css under firefox

Hi All,

I'm using javascript to preload my images in an array called images. I'm loading a skin into the image array and then dynamically creating 'div' tags and setting the images as background images using javascript to edit the inline css of an element. This solutions works fine in IE 6 and 7 but under Firefox the images arn't loading properly.

have a look: cardiffafterdark.com/main

the actual line that loading up the images is

with(style) {
    position='absolute';
    backgroundImage= "url('"+images[this.skin.name]['topLeft'].src+"')";
    left='0px';
    top='0px';
    width=this.skin.topLeft['width'];
    height=this.skin.topLeft['height'];
    cursor = moveCursor;
}

Code (markup):

Any help will be appriciated

Thanks

Jonathan

 

I think that most of those lines are not even close to valid javascript :\

 

if(this.skin.middleLeft['active']) {
	with(middleLeft) {
		with(style) {
			position='absolute';
			backgroundImage= "url('"+images[this.skin.name]['middleLeft'].src+"')";
			left = '0px';
			top=this.skin.topLeft['height'];
			width = this.skin.middleLeft['width'];
			dummy = this.height - this.skin.topLeft['height'] - this.skin.bottomLeft['height'];
			height = dummy + 'px';
			cursor = moveCursor;
			}
	}
eventItems[eventItems.length] = middleLeft;
					
}

Code (markup):

here's a more complete block of code you may be able to see that i am assigning an object to middleLeft and using a with, then using naother with on the style. The problem is not with those lines its only this line

backgroundImage= "url('"+images[this.skin.name]['middleLeft'].src+"')";

Code (markup):

it is part of a very large project and yes there are other minor bugs that are in the code but i'm working though fising them while i'm building them. The only thing i am having a problem with is display the preloading images as backgrounds in firefox(gecko) related browers. Thanks for the post though.

may there just be a silly mistake that i am making?

Regards

Jonathan

 

it seems that i have solved the problems. The code was fine its to do with the differences between firefox and IE loading.

I have the index in the root and the imageLoader.js file is in a directory called infobox one level above the index file. it seems that IE will load all images from the directory of the index file, but firefox will load from the where the imageLoader.js file is. The second makes more sence to me.

All i did was move the imageLoader.js to the root and everything worked fine

the lines that loads the image is

images[name]['middleLeft'] = new Image();
images[name]['middleLeft'].src = "images/skins/"+name+"_middleLeft"+format; 

Code (markup):

I hope me making this mistake will help someone not make this mistake. cause i've wasted a day on this lol

thanks