Crossfade images in table background

JavaScript
1

I’ve worked for a while to get a table background image to automatically rotate using JS, and it’s working well now. However, it’s quite choppy. Any way to make the images crossfade to smooth it out?

Test page is here:
http://www.newdomainliving.com/indexjava.php

Thanks!

2

I believe it will. So you will need to change around the HTML a bit. Shouldn’t be too hard.

3

Cool, thanks for your help.

The reason it’s set as a td background (and not a standard img or div) is that it needs to float below the three images at the bottom to keep the “wave” effect intact.

Changing it to a normal rotating img will kill that, won’t it?

4

I’ve created this code for you:


window.onload = function() {
    var images = ['images/home/main-image-ut.jpg', 'images/home/main-image-bay.jpg', 'images/home/main-image-city.jpg', 'images/home/main-image.jpg'];
    var intImagesIndex = 0;
    var image = document.getElementById("rotatingImg");
    
    (function () {
        setInterval(switchImage, 2000);
    })();
    
    function switchImage() {
        if(image) { // id was found
            
            if (intImagesIndex >= images.length) // make sure variable value is not larger than array length (-1)
                intImagesIndex = 0;
            
            for(var i = 100; i > 100; i--) { //fade it out
                setOpacity(image, i);
            }
            
            image.setAttribute('src' images[intImagesIndex++]);
            
            for(var i = 0; i < 100; i++) { //fade it in
                setOpacity(image, i);
            }
        }
    }
    
    function setOpacity(element, level) {
        if (element.filters) { // this is IE
            element.style.filters = 'alpha(opacity= ' + level + ')';
        }
        else { //working with all other browsers
            element.style.opacity = level / 100; // opacity must be in decimal format
        }
    }
}

I haven’t tested it out, but it should work correctly in all modern browsers.

Also you’re going to need to change it around a bit. The image/container needs to be able to completely hide without affecting anything around it. My suggestion is the following:

  1. Create a container, place it into the TD and modify the background like your original script.

  2. Use an img element to accomplish the same task.


<td id="tblId" width="679" height="505" valign="bottom">
<!-- Here -->
<img src="example.jpg" id="rotatingImg" />
<!-- or -->
<div class="example" id="exampleImg"></div>

<a href="http://www.newdomainliving.com/collection.php"><img src="images/home/home-button.png" alt="home" width="224" height="173" border="0" /></a>
<a href="http://www.newdomainliving.com/design.php"><img src="images/home/design-button.png" alt="design" width="233" height="173" border="0" /></a>
<a href="http://www.newdomainliving.com/blog/"><img src="images/home/blog-button.png" alt="blog" width="222" height="173" border="0" /></a>
</td>

Alternatively, you can use jQuery and implement it with less code.