JavaScript - - By Simon Willison

Opacity and DHTML

Richard Rutter’s Onload image fades without Flash demonstrates a way of creating a “fade-in” effect for a photograph using dynamic alteration of the CSS opacity property. Opacity isn’t part of the CSS 2.1 specification (although it is covered by CSS 3) so different browsers have different ways of controlling it. Richard’s setOpacity() function provides a cross-browser workaround, with code that handles IE, Safari, Konqueror and Gecko-based browsers:


function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari

Richard's blog entry provides further background information about the technique.