/* Div blending script by Michael Lunsford.
http://www.virtual-showcase.net/contact.html
Special thanks to Spellcoder.nl for multi-browser support.
http://spellcoder.nl/showpage.php?page=CSS-Transparancy
call this document from HTML like this:
Basic Usage: the array "imagefiles" is required, and should be created in the calling document. Here is an example
// BEGIN EXAMPLE
var imagefiles=new Array();
var i = 0;
imagefiles[i++]="images/commercial.jpg";
imagefiles[i++]="images/commercial2.jpg";
imagefiles[i++]="images/commercial3.jpg";
// END EXAMPLE
Also, the parent DIV with the ID "theblender" must be created in your HTML. The DIV should have an appropriate height and width to match the images you will be inserting (all of the images should be roughly the same size, too). Here is an example. Change the width and height of the DIV to match the blending image dimentions. For browsers that don't support javascript, you should include the first image inside the new DIV or as a CSS background. Both will be over-written by javascript later.
Next, be sure to call the blend_div() function with
Using setTimeout ensures this script has had time to create the appropraite DIVS on the main page before the page attempts to modify the DIVs.
HOW IT WORKS
1. sets the background of "theblender" DIV to the first image.
2. Rewrites the inner portion of "theblender" DIV. Creates a new DIV, sets it to transparent, and loads the next image from the imagefiles array.
3. Begin fading the transparent DIV to visible at 10% increments over 1.25 seconds.
4. Once the DIV is fully visible, it rewrites the background image of "theblender" DIV to the same as the foreground image.
5. Make the foreground DIV 100% transparent.
6. In the transparent space, load the next image from the imagefiles array.
7. Loop back to number 3.
*/
var layerid1="Blend_me_Layer1"; //Name of the new DIV to be created. Call it whatever you want.
var i = 1; //intiger used to loop through the imagefiles array
var runagain; //generic variable set as an interval to run a function
var img; //variable used to create the new DIV's correct width and height.
img = new Image();
img.src = imagefiles[0]; //loads the first image from the provided imagefiles array.
//the following two lines don't work. They apparently set the div height and width to zero. Who knows why.
//setTimeout('document.getElementById(\'theblender\').style.width = "'+img.width+'px"',9000);
//setTimeout('document.getElementById(\'theblender\').style.height = "'+img.height+'px"',9000);
setTimeout('document.getElementById(\'theblender\').style.background = "url('+imagefiles[0]+')"',990); //associates a background image in theblender DIV
setTimeout('document.getElementById(\'theblender\').innerHTML = \'\'',1000); //creates a new DIV inside theblender DIV with an opacity of 0 (completely transparent) and assigns the next image in the sequence. This image will fade in shortly.
function blend_div() { //will check transparency and either make transparent, or set the image background of theblender DIV to the next image.
if(parseFloat(check_trans(layerid1)) < 1) { //if any level of transparency
runagain=window.setInterval("okay_blend('"+layerid1+"')",125); //set the interval to blend to visible
setTimeout("blend_div('"+layerid1+"')",1500); //run this function again in 1.5 seconds (which should be a little longer than it takes to fully blend)
} else { //if fully visible
window.clearInterval(runagain); //turn off the blend to visible function
document.getElementById('theblender').style.background = 'url('+ imagefiles[i] +')'; //change the background of theblender DIV to the blended image.
setTimeout("un_blend('"+layerid1+"')",1000); //make the top image 100% transparent.
if(++i>(imagefiles.length-1)) i = 0; //if next increment of i is beyond the imagefiles array, reset i to 0
setTimeout("document.getElementById('"+layerid1+"').innerHTML = '![](\""+)
'",1500); //insert new image in transparent DIV
setTimeout("blend_div('"+layerid1+"')",5000); //run this function again in five seconds
}
}
function check_trans(tempvar) { //checks the transparency of [tempvar] DIV. 1 is not transparent, 0 is transparent. 100 possible "between" settings.
var newval;
if (document.getElementById(tempvar).style.opacity) newval=document.getElementById(tempvar).style.opacity;
else if (document.getElementById(tempvar).filters) newval=document.getElementById(tempvar).filters.alpha.opacity/100;
else if (document.getElementById(tempvar).style.MozOpacity) newval=document.getElementById(tempvar).style.MozOpacity;
else if (document.getElementById(tempvar).style.KhtmlOpacity) newval=document.getElementById(tempvar).style.KhtmlOpacity;
return newval;
}
function set_trans(tempvar,newval) { //sets [tempvar] DIV to [newval] transparency.
var d = document.getElementById(tempvar)
if(document.getElementById(tempvar).style.opacity) document.getElementById(tempvar).style.opacity=newval;
if(d.filters) document.getElementById(tempvar).filters.alpha.opacity=newval*100;
if(d.style.MozOpacity) d.style.MozOpacity=newval;
if(d.style.KhtmlOpacity) d.style.KhtmlOpacity=newval;
}
function okay_blend(tempvar) { //runs every 125 miliseconds to blend [tempvar] DIV to 1 from 0.
var newvar=parseFloat(check_trans(tempvar));
newvar = newvar + 0.1; //increment to fade in. bigger is faster.
set_trans(tempvar,newvar);
}
function un_blend(tempvar) { //will set [tempvar] DIV to either fully transparent or fully visible depending on which it's closer to.
if(check_trans(tempvar)<.5) set_trans(tempvar,1);
else set_trans(tempvar,0);
}