// ISF1.11 :: Image swap-fade // ***************************************************** // DOM scripting by brothercake -- http://www.brothercake.com/ //****************************************************** //global object var isf = { 'clock' : null, 'fade' : true, 'count' : 1 } /******************************************************* /***************************************************************************** List the images that need to be cached *****************************************************************************/ isf.imgs = [ 'buttons/udm4-whitebutton88x31.gif', 'buttons/udm4-greenbutton88x31.gif', 'buttons/udm4-purplebutton88x31.gif' ]; /***************************************************************************** *****************************************************************************/ //cache the images isf.imgsLen = isf.imgs.length; isf.cache = []; for(var i=0; i 0 && typeof isf.obj.filters.alpha == 'object' && typeof isf.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none'; } else { isf.type = 'none'; } //change the image alt text if defined if(typeof arguments[3] != 'undefined' && arguments[3] != '') { isf.obj.alt = arguments[3]; } //if any kind of opacity is supported if(isf.type != 'none') { //copy and convert fade duration argument //the duration specifies the whole transition //but the swapfade is two distinct transitions isf.length = parseInt(arguments[2], 10) * 500; //create fade resolution argument as 20 steps per transition //again, split for the two distrinct transitions isf.resolution = parseInt(arguments[2], 10) * 10; //start the timer isf.clock = setInterval('isf.swapfade()', isf.length/isf.resolution); } //otherwise if opacity is not supported else { //just do the image swap isf.obj.src = isf.src; } } }; //swapfade timer function isf.swapfade = function() { //increase or reduce the counter on an exponential scale isf.count = (isf.fade) ? isf.count * 0.9 : (isf.count * (1/0.9)); //if the counter has reached the bottom if(isf.count < (1 / isf.resolution)) { //clear the timer clearInterval(isf.clock); isf.clock = null; //do the image swap isf.obj.src = isf.src; //reverse the fade direction flag isf.fade = false; //restart the timer isf.clock = setInterval('isf.swapfade()', isf.length/isf.resolution); } //if the counter has reached the top if(isf.count > (1 - (1 / isf.resolution))) { //clear the timer clearInterval(isf.clock); isf.clock = null; //reset the fade direction flag isf.fade = true; //reset the counter isf.count = 1; } //set new opacity value on element //using whatever method is supported switch(isf.type) { case 'ie' : isf.obj.filters.alpha.opacity = isf.count * 100; break; case 'khtml' : isf.obj.style.KhtmlOpacity = isf.count; break; case 'moz' : //restrict max opacity to prevent a visual popping effect in firefox isf.obj.style.MozOpacity = (isf.count == 1 ? 0.9999999 : isf.count); break; default : //restrict max opacity to prevent a visual popping effect in firefox isf.obj.style.opacity = (isf.count == 1 ? 0.9999999 : isf.count); } };