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.backgroundImage 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:relative" to the style of the image div instead. Tested and seems to work.