Image Fades Ii

In the previous article, I discussed the basics of an image fade and how it could be used to display a series of images while conserving space, using the examples of a keyless entry remotes site, as the fade can display images for highly aesthetic products or those that are more technically functional. In this article, we move into some of the technical aspects of adding an image fade to a website. This article will not focus on the code itself, but rather some of the options you have and issues to look out for.

The basic code is simple enough. You have a timer running at a rapid rate (generally about 10 miliseconds), that reduces the opacity of the target image or div while it is positive. Once it hits zero, it changes the image source (for a basic, all-Javascript fade) or alters the inner HTML of the div (for an AJAX-based fade). It then raises the opacity back up to 100%, and delays the timer for a few seconds until the process repeats. So a viewer will see a keyless remote (for example) on screen for a few seconds, which grows rapidly more transparent until it vanishes entirely, and then a new remote will fade in, display for a few seconds, and fade out, and so on.

What's the difference between the straight Javascript and the AJAX versions? Well, with Javascript, you need to collect all the information from your database before-hand. Using AJAX lets you gather the information with each image that you swap out, and generally gives more control if you want to do more complex things with the images. On the flip side, you will generally need the image to stay faded out for somewhat longer with AJAX, to account for processing time.

One thing you don't want is for your old keyless entry remote to start fading back in, and then suddenly switch to the new one. To prevent this, your best move is to preload your images, and make sure your AJAX completing is what triggers the fade in.

Another thing to remember is that opacity is one of those things that the various browsers just don't feel like agreeing on. Make sure you set the opacity changing appropriately for all the browsers, or you'll get remotes just switching out with no fade. While this still accomplishes the general goal, it lacks all the aesthetic appeal of the fade.

Now that we have a baseline for the fade, we can move on to some advanced options. In the next article, I will discuss a few variations on the image fade, including how to run multiple fades at once and an "expanding" fade that relies on changing the image size rather than its opacity.

By: Dustin Schwerman

Article Directory: http://www.articledashboard.com

Dustin Schwerman is the head web designer for Truly Unique Website Design. Truly Unique works on websites of all varieties, such as www.cruisingforremotes.com, where you can find keyless entry and keyless remotes.