I've got a banner that has a single image background in the CSS and it fades in but I'd like to set it up so it actually loaded an array of images. That is 'if' its possible so the users without JavaScript enabled still get the original image. Is this at all possible?

The original code is below

code:--------------------------------------------------------------------------------function initImage()
{
imageId = 'loader';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}

function fadeIn(objId,opacity)
{
if (document.getElementById)
{
obj = document.getElementById(objId);
if (opacity <= 100)
{
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}

function setOpacity(obj, opacity)
{
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

window.onload = function() {
initImage();
}

# now if I put images into an array like (without the hashes of course)

##var pics = new Array(3); // Change this to reflext the number of ##slides
##var num = 0;
##var totalPics = 2; // 3 slides numbered 0 to 2

// Command to preload the images into the array
##for (num = 0; num <= totalPics; num++) {
## pics[num] = new Image();
## pics[num].src = "graphics/pic" + num + ".jpg";
##}--------------------------------------------------------------------------------

 

 

 

Reply