Design (or coding) notes for Orange & Blue
May 11th, 2005
The slide show effect on the Orange & Blue front page uses the Fade Images JavaScript technique. The images do a fade transition in IE, but just flip in Firefox. It will probably eventually be replaced this Summer by a Flash movie that accomplishes the same thing.
While researching the above, I also found this one at Colouir.org, which is way cool, but didn’t do what we needed.
The “CSS Rollovers” on the right use the Fahrner Image Replacement (FIR) technique described in chapter 16 of Jeffrey Zeldman’s designing with web standards. The technique was first described by Doug Bowman in the article, Using Background-Image to Replace Text.
The Campaign for the University of Florida
May 11th, 2005 at 1:29 pm
On some of my sties, I have started using a javascript slideshow that is an adaptation of the brothercake image transitions at http://www.brothercake.com/site/resources/scripts/transitions/. These fades work in all modern browsers, and the photos just flip in IE 5 and lower. You can see it in action at http://www.humboldt.edu/~econ/. I can send you the script if you’re interested.
Nice work, btw!
June 30th, 2005 at 4:20 pm
[...] College News RSS feed added Fading image transitions revisited I previously wrote about using a JavaScript effect for fading transitions between jpeg images on a web [...]
November 20th, 2008 at 10:10 am
[...] written a few times before (1, 2, 3) about techniques for rotating images in place on a page, such as is done on the home page of the [...]