SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict mickmel's Avatar
    Join Date
    Feb 2001
    Location
    Marietta, GA
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Crossfade images in table background

    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!
    MickMel.com - My portfolio, etc.
    @mickmel - Twitter
    Google Earth Hacks - Fun stuff for Google Earth.

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've created this code for you:

    Code JavaScript:
    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.

    Code HTML4Strict:
    <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.
    Follow me @YaderHernandez

  3. #3
    SitePoint Addict mickmel's Avatar
    Join Date
    Feb 2001
    Location
    Marietta, GA
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    MickMel.com - My portfolio, etc.
    @mickmel - Twitter
    Google Earth Hacks - Fun stuff for Google Earth.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe it will. So you will need to change around the HTML a bit. Shouldn't be too hard.
    Follow me @YaderHernandez


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •