// JavaScript Document /***********************************************/ /* imgFadeSwap.js */ /* Developed By: */ /* Michael L. Brown, CPA, and */ /* Michael Bishton */ /* First Published: 04/13/03 under GNU license */ /* Last Updated: 02/23/04 - no change in the */ /* code, but to the discussion to impliment */ /* addLoadListener() as the event handler. */ /* addLoadListener() was originally developed*/ /* by james edwards and cameron davis and is */ /* also licensed under GNU. */ /* */ /* discussion: */ /* */ /* these series of functions fade images in or */ /* out as specified by the call to */ /* addLoadListener(). addLoadListener is a */ /* replacement for the window object's load */ /* event handler in order to enable multiple */ /* instance of load events without conflicting */ /* with other handlers. it is contained in */ /* addLoadListener.js */ /* */ /* the initial call to addLoadListener() will */ /* load img_fade() as the event(s). within the */ /* the call to addLoadListener will be */ /* in a form similar to the following: */ /* */ /* to fade in a single image: */ /* addLoadListener( function() { */ /* img_fade( 'in_id', seconds, 'in' ); */ /* } ); */ /* */ /* to fade out a single image: */ /* addLoadListener( function() { */ /* img_fade( 'out_id', seconds, 'out' ); */ /* } ); */ /* */ /* to fade in a single image while fading out */ /* another image as a morph: */ /* addLoadListener( function() { */ /* img_fade( 'start_id', seconds, 'out' );*/ /* img_fade( 'end_id', 5, 'in' ); */ /* } ); */ /* */ /* in the above examples, the calls to */ /* img_fade() in the anonymous function all */ /* pass three parameters. the first parameter */ /* is the id of a style. the second parameter */ /* is the number of seconds to use during the */ /* fade. usually when executing a morph, the */ /* number of seconds is the same for the fade */ /* out as for the fade in. however, the fade */ /* in can also be a larger timespan with good */ /* results. the final parameter is the */ /* direction of the fade, either 'in' or */ /* 'out'. img_fade() looks for a value of */ /* value of 'out', and, if not the value, the */ /* methods will continue as though 'in' was */ /* passed in the parameter. */ /* */ /* for each of the three examples above, the */ /* style would be similar to the following */ /* */ /* to fade in a single image: */ /* #in_id { */ /* opacity: 0; */ /* -moz-opacity: 0; */ /* -khtml-opacity: 0; */ /* filter: alpha( opacity=0 ); */ /* } */ /* */ /* to fade out a single image: */ /* #out_id { */ /* opacity: 1; */ /* -moz-opacity: 1; */ /* -khtml-opacity: 1; */ /* filter: alpha( opacity=100 ); */ /* } */ /* */ /* in each of the above styles, you can add */ /* positioning values as may be desired */ /* */ /* to fade in a single image while fading out */ /* another image as a morph: */ /* #start_id { */ /* opacity: 0; */ /* -moz-opacity: 0; */ /* -khtml-opacity: 0; */ /* filter: alpha( opacity=0 ); */ /* } */ /* */ /* #end_id { */ /* opacity: 1; */ /* -moz-opacity: 1; */ /* -khtml-opacity: 1; */ /* filter: alpha( opacity=100 ); */ /* } */ /* */ /* #start_id, */ /* #end_id { */ /* position: absolute; */ /* top: 10px; */ /* left: 10px; */ /* } */ /* */ /* of course, while the absolute postioning */ /* is essential for a morph, the actual */ /* values for top and left can be adjusted as */ /* necessary. */ /***********************************************/ /***********************************************/ /* globals */ /* fps frames per second. typically a */ /* value of 10 to 30 is used. */ /***********************************************/ var fps = 20; /***********************************************/ /* functions */ /***********************************************/ /***********************************************/ /* function img_fade */ /* */ /* called by anonymous function within a */ /* to addLoadListener() */ /* */ /* parameters: */ /* img [string] id of image */ /* time [number] number of seconds to */ /* execute the fade */ /* dir [string] if not 'out', assumed */ /* to be 'in' */ /* */ /* globals */ /* fps [number] number of frames per */ /* second */ /* */ /* locals */ /* img [object] image element id */ /* steps [number] number of frames in */ /* fade */ /* op_model [string] opacity model */ /* - based on browser in use */ /* - the order of discovery of the */ /* op_model must be retained as */ /* w3c (late mozilla and safari),*/ /* early mozilla, khtml (opera), */ /* ie 5.5 and later, and then */ /* all others such as ie 5.0 and */ /* earlier */ /* - if op_model is not discovered,*/ /* then no changes are made to */ /* the display of the image */ /* */ /* calls: img_fade_exec() */ /***********************************************/ function img_fade( img, time, dir ) { img = document.getElementById( img ); var steps = time * fps if ( typeof img.style.opacity != 'undefined' ) { var op_model = 'w3c'; } else if ( typeof img.style.MozOpacity != 'undefined' ) { op_model = 'moz'; } else if ( typeof img.style.KhtmlOpacity != 'undefined' ) { op_model = 'khtml'; } else if ( typeof img.filters == 'object' ) { op_model = (img.filters.length > 0 && typeof img.filters.alpha == 'object' && typeof img.filters.alpha.opacity == 'number' ) ? 'ie' : 'none'; } else { op_model = 'none'; } if ( op_model != 'none' ) { if ( dir == 'out' ) { img_fade_exec( steps, img, 1, false, op_model ); } else { img_fade_exec( steps, img, 0, true, op_model ); } } } /***********************************************/ /* function img_fade_exec */ /* executes the fade with recursive*/ /* call to setTimeout */ /* */ /* called by img_fade */ /* */ /* parameters: */ /* steps [number] number of steps in the */ /* execution of the fade. equals */ /* frames per second times number */ /* seconds to execute the fade */ /* img [object] image element id */ /* op_level [number] 1 if fading out, 0 if */ /* fading in */ /* op_target [boolean] set to false if */ /* fading out and true if fading */ /* in */ /* op_model [string] opacity model */ /* */ /* globals */ /* fps [number] number of frames per */ /* second */ /* */ /* locals -none- */ /* */ /* calls: img_fade_set() */ /* setTimeout() */ /***********************************************/ function img_fade_exec( steps, img, op_level, op_target, op_model ) { // set next op_level and verify that its valid ( >= 0 && =< 1 ) op_level += ( op_target ? 1 : -1 ) / steps; if ( op_target ? op_level > 1 : op_level < 0 ) { op_level = op_target ? 1 : 0; } // set the opacity img_fade_set_opacity( img, op_level, op_model ); // if necessary, call next fade step if ( op_target ? op_level < 1 : op_level > 0 ) { setTimeout( function() { img_fade_exec( steps, img, op_level, op_target, op_model ); }, 1000 / fps ); } } /***********************************************/ /* function img_fade_set_opacity */ /* sets the opacity for the next */ /* iteration of img_fade_exec() */ /* */ /* called by img_fade_exec */ /* */ /* parameters: */ /* img [object] image element id */ /* op_level [number] current opacity level */ /* op_model [string] opacity model */ /* */ /* globals -none- */ /* fps [number] number of frames per */ /* second */ /* */ /* locals -none- */ /* */ /* calls: -none- */ /***********************************************/ function img_fade_set_opacity( img, op_level, op_model ) { switch( op_model ) { case 'ie': img.filters.alpha.opacity = op_level * 100; break; case 'khtml': img.style.KhtmlOpacity = op_level; break; case 'moz': img.style.MozOpacity = ( op_level == 1 ? 0.9999999 : op_level ); break; default: img.style.opacity = ( op_level == 1 ? 0.9999999 : op_level ); } }