Home » Tutorials Advanced Tutorial

Image Cross Fade Redux

3.9/5.0 (19 votes total)

Steven Chipman
March 22, 2006

Steven Chipman
Steven Chipman has written 1 tutorials for JavaScriptSearch.
View all tutorials by Steven Chipman...

This is a captivating way to present photos on a webpage.  A working demonstration can be found here: http://slayeroffice.com/code/imageCrossFade/xfade2.html

This technique uses unobtrusive DOM scripting and semantic markup to achieve its goals, and is somewhat less abusive of the CPU in Firefox. It also works in Safari - the original version was written prior to Safari supporting the CSS3 "opacity" property. Opera doesn't support opacity, so the images will just flip in that browser.

Following the unobtrusive philosophy, the document is completely usable when javascript isn't available. This is accomplished by overwriting the style sheet with one designed for the application in the so_init() method. If javascript isn't available, the user gets an arms length list of photos.

The source of the page:



Copy the following JavaScript source into your favourite editor and save as "xfade.js":


The following two pieces of code are the CSS files, which the page needs.

Initial CSS (xfade2.css):

CSS imported with JavaScript (xfade2_0.css):



This tutorial was written by Steven Chapman.  

Add commentAdd comment (Comments: 0)  



Related Resources

Other Resources