Inside Technique : Image Transition Behavior
By Scott Isaacs

A common task on the web is to rotate between a set of images. Traditionally switching images is an immediate operation - the image immediately replaces the existing one.

Replacing an image is easy and is supported by Netscape 3.0 and later and Internet Explorer 4.0 and later. To change an image you simply give the image a name and then change the image's src property. For example, to switch betweent two images on a timer:

var isrc = "http://scottws1/gifs/redball.gif"
function DoLoad() {
	// Change the src of the image with the name i1.
	document.images.i1.src = isrc
	if (isrc=="http://scottws1/gifs/ball.gif") 		
		isrc = "http://scottws1/gifs/redball.gif"
	else
		isrc = "http://scottws1/gifs/ball.gif"
	setTimeout("DoLoad()",2500)
}

if (document.images)
	setTimeout("DoLoad()",2500)

Internet Explorer 4.0 added transition support allowing you to cleanly transition from one image to another. You could choose from a large number of transitions. For example, you could dissolve, fade, swipe, blinds, etc., between two images. Incorporating the transition effect into the above code requires a small amount of browser detection.

With Internet Explorer 5.0 and behaviors you can apply image transitions without effecting the original script. Imagine using the above code for all browsers where Internet Explorer 5.0 automatically gets the enhanced effect. All this without any browser detection. Next we show you how we created the transition behavior.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.