/* ** blend.js ** (c) 2004 ASCON Group. All rights reserved. ** javascript for image blending ** ** !!! R E A D M E !!! ** 1) Global variables "path" and "blend_sum" must be set in header: ** e.g. ** var path = "{$PATH_TEMPLATE}"; ** var blend_sum = 2;// how many images? ** ** 2) function startBlend() must be started in body tag ** e.g. ** */ // var blend_counter = 1; // definition commented, starting with random image // Set the slideshow speed (in milliseconds) var SlideShowSpeed = 15 * 1000; // Set the duration of crossfade (in seconds) var CrossFadeDuration = 5; // start timer function startBlend() { setInterval("changeBlend()", SlideShowSpeed); } // function for changing images function changeBlend() { if (blend_sum > 0) { // if some illustrations exists if (blend_counter < blend_sum){ blend_counter++; } else { blend_counter = 1; } ObjBlend = document.getElementById("blend"); ObjBlend_Description = document.getElementById("blend_description"); // 1) change image description ObjBlend_Description.innerHTML = OBlendImg_Description[blend_counter]; // 2) blend image if (browser.isIE){ ObjBlend.style.filter="blendTrans(duration=" + CrossFadeDuration + ")"; f = ObjBlend.filters.blendTrans; f.Apply(); ObjBlend.src = OBlendImg[blend_counter].src; f.Play(); } else if (browser.isMozilla || browser.isFirefox || browser.isFirebird) { // Inspirace: http://www.brainerror.net/scripts_js_blendtrans.php blendimage ("blend", OBlendImg[blend_counter].src, CrossFadeDuration*1000 ); } else { // not supported browsers, simply change images ObjBlend.src = OBlendImg[blend_counter].src; } } // end of: if some illustrations exists } // mozilla support function blendimage(imageid, imagefile, millisec) { // make image transparent changeOpac(0, imageid); //make new image document.getElementById(imageid).src = imagefile; //fade in image opacity (imageid, 0, 100, millisec ); } function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } } //change the opacity for different browsers function changeOpac(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; }