When you want to be able to display a large number of images in a small amount of space, one of your best tactics is some Javascript code that lets you keep some of the images off-screen, and cycle through them. Even when aesthetics isn't the main draw for the site's product - as with keyless entry remotes, for example - pictures can help break up text walls and make the site itself more appealing. Having various keyless remotes or other items moving in and out adds color and animation, catching visitors' attention and giving them a hint of a website's variety. There are several ways to code moving images; in this series of articles, we'll be discussing the image fade.



So what is an image fade, and how does it compare to, say, an image crawl or scroll? An image fade brings up a selection of pictures, displaying them one at a time, each for a few seconds, and then fades out, switches images, and fades back in to display a new picture. So you might have a keyless entry remote display, then fade out and have a remote for a different make or model fade in, and a few seconds later replace it with a third, and so on.

Two of the biggest advantages of image fades over crawls and scrolls (where you have a train of images that either moves automatically across the screen in a loop or is moved back and forth by the user) is that you don't need to have all of the images on the page at once. Rather than waiting for all the images to load for the page to be fully loaded (delaying any onload scripts you might be using, and possibly delaying the loading of other content), you can have only a single keyless remote loaded up, and use an onload preloader to start loading the rest once the page has fully loaded. Additionally, you don't need a lot of vertical or horizontal space for the entire train, giving you more flexibility in positioning and allowing you to use larger images. This can also mean extra room for additional information; you might list the name, price, and maybe a short description beneath each keyless entry remote, for example. A crawl or scroll with that capability would take up quite a lot of space, making it unfeasible unless the crawl is meant as the focal point of the page.

A fade involves the display of only one image at a time, which is something of a disadvantage, as visitors can't, for example, scroll through a large selection at once. As such, image fades are much less useful than crawls and scrolls as a navigational tool. It's also worth noting that image fades are somewhat more complex than crawls and scrolls, as they work best with the additional of AJAX coding (although you can create a functional one using only standard Javascript).

So, with the key points of image fades noted, the next article will focus on some of the things you will need to consider when integrating the fade into a website. The final article in this set will go over some of the options you have for expanding your image fades.