Javascript slideshow problem in IE only

[Phil Gent]

Hi all,

I've written a small piece of code to scroll through images in an array and fade in and out of each image (a slideshow).

I have a div, with an image inside which is the same size. By changing the image.src and div.backgroundI mage and then adjusting the opacity I can transition the images.

It works fine in firefox and safari but special-needs IE won't update the images on this line (line 15) of code;-

div.style.backgroundImage="url('" + pictures[next] + "')";

The whole code is below where slideshow is the ID of the div and image is the ID of the image object.

<!--
var pictures=["http://bytes.com/images/1.jpg","http://bytes.com/images/2.jpg","http://bytes.com/images/3.jpg","http://bytes.com/images/4.jpg","http://bytes.com/images/5.jpg","http://bytes.com/images/6.jpg","http://bytes.com/images/7.jpg","http://bytes.com/images/8.jpg","http://bytes.com/images/9.jpg"];

var opacity = 100;
var fadetime = 50;   //  milliseconds between each of the fade states
var fadestep = 5;     // reduction in opacity (from 100) for each fade state - lower number = smoother transition
var betweentime = 7000  // milliseconds between changing images
var current = 0;
var next = 1;

function startslideshow()
{
	opacity = 100;     // set opacity level back too 100%
	div = document.getElementById('slideshow');   // name the div for easy reference
	div.style.backgroundImage="url('" + pictures[next] + "')";  // set div background image as next image
	$ = document.getElementById('image');  // image name for refernce later
	$.src = pictures[current];  // Set the image source to the current image
	changeopacity();   // kick off the function to change the opacity
}

function changeopacity()
{	
	$ = document.getElementById('image');   //   Image name for reference later
	opacity = opacity-fadestep;  //  set the opacity level for this stage of changing the opacity
	$.style.opacity = opacity/100; // opacity for all browsers.
	$.style.MozOpacity = opacity/100;
	$.style.KhtmlOpacity = opacity/100;
	$.style.filter = 'alpha(opacity='+ opacity + ')';
		if(opacity <= 0)
		{
			$.src = pictures[next];
			if (current == pictures.length-1) current = 0;
			else current++;
			if (next == pictures.length-1) next = 0;
			else next++;
			opacity = 100;
			setTimeout("startslideshow()",betweentime);
			return;
		}
		else setTimeout("changeopacity()",fadetime);
}
//-->

Any ideas as to why this falls over in internet explorer ?? Thanks in advance, Phil

I also attached the whole site if this helps :-)

[limweizhong]

Maybe you don't need the single quotes in the url('url'). Just something I would try removing.

Edit: Sorry the above doesn't work. It's another hasLayout bug in IE. You will need to add to the style of the slideshow div "zoom:1;".

Edit Again: Sorry, it's some other bug... Ignore the previous edit and add "position:relat ive" to the style of the image div instead. Tested and seems to work.