// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // // - - - - - - // Function B a n n e r F a d e r // - - - - - - // Author Thomas Menges (thomas.menges@web.de) // created 25.01.2006 // Version 1.0 // - - - - - - // Info displays any number of predefined banner entries // in a container1 while performing a fading effect // (sliding transparency) in an overlaying container2 // - - - - - - // Usage 1. add "BannerFader.js" to your document BEFORE // predefining banners and BannerFader variables // // 2. provide a container1 (incl. graphics tag) and // a container2 (incl. address tag) in your html // sourcecode (see also example code below) // // 3. set required variables // bf_fadingContainerID /* ID of container2 */ // bf_bannerGraphicsID /* ID of img tag */ // bf_bannerUrlID /* ID of address tag */ // bf_bannerPath /* path to banner graphics */ // to your needs // // 4. set optional variables // bf_opacityStep (in px) /* opacity speed */ // bf_faderRefresh (in ms) /* refresh rate */ // to your needs // // 5. use "NewBanner" method to predefine new banner // entries (provide graphics name, banner url and // steady display duration), like // NewBanner("web-de.gif","http://www.web.de",5) // // 6. add following "onLoad" event to your body tag: // onLoad='BannerFader();' // // 7. add graphics file "banner_href.gif" to the // directory, where your banner graphics are // - - - - - - // tested on Mozilla Firefox 1.5 // MS Internet Explorer 6.0 // // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // example code: // - - - - - - - // // // // // // //

// // //

// //

//

//

// // // //

// // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - var bf_fadingContainerID = "** missing **" ; /* predefinition required */ var bf_bannerGraphicsID = "** missing **" ; /* predefinition required */ var bf_bannerUrlID = "** missing **" ; /* predefinition required */ var bf_bannerPath = "./" ; /* predefinition required */ var bf_opacityStep = 3 ; /* in px */ var bf_opacOffset = 100 ; var bf_faderRefresh = 200 ; /* in ms */ var bf_banner_idx = 0 ; var bf_faderThread1 ; var bf_faderThread2 ; var bf_TabBANNER = new Array() ; function BANNER(bf_graphics, bf_url, bf_duration) { this.image = new Image() ; this.image.src = bf_bannerPath + bf_graphics ; this.url = bf_url ; this.duration = bf_duration ; } function NewBanner(bf_graphics, bf_url, bf_duration) { bf_TabBANNER[bf_banner_idx] = new BANNER(bf_graphics, bf_url, bf_duration) ; bf_banner_idx++ ; } function BannerFader(fadingMode) { if (BannerFader.arguments.length < 1) { try { bf_fadingMode = "in" ; bf_banner_idx = 0 ; if (document.all) /* MS IE */ document.getElementById(bf_fadingContainerID).style.filter = "alpha(opacity=100)" ; else /* Firefox */ document.getElementById(bf_fadingContainerID).style.opacity = 1.0 ; document.getElementById(bf_bannerGraphicsID).src = bf_TabBANNER[bf_banner_idx].image.src ; document.getElementById(bf_bannerUrlID).href = bf_TabBANNER[bf_banner_idx].url ; } catch(e) { alert("\nERROR\n\nProbably not all container / graphics /url IDs are\npredefined as needed!") ; } } bf_opacOffset = (bf_fadingMode == "in") ? (bf_opacOffset - bf_opacityStep) : (bf_opacOffset + bf_opacityStep) ; if (bf_opacOffset <= 0) { bf_opacOffset = 0 ; if (bf_fadingMode == "in" && bf_TabBANNER[bf_banner_idx].duration > 0) { bf_fadingMode = "out" ; if (document.all) /* MS IE */ document.getElementById(bf_fadingContainerID).style.filter = "alpha(opacity=" + bf_opacOffset + ")" ; else /* Firefox */ document.getElementById(bf_fadingContainerID).style.opacity = (bf_opacOffset / 100) ; bf_faderThread1 = setTimeout('BannerFader("' + bf_fadingMode + '")',(bf_TabBANNER[bf_banner_idx].duration * 1000)) ; return ; } else { clearTimeout(bf_faderThread1) ; bf_fadingMode = "out" ; } } if (bf_opacOffset >= 100) { bf_fadingMode = "in" ; bf_opacOffset = 100 ; bf_banner_idx = (bf_banner_idx == (bf_TabBANNER.length - 1)) ? 0 : (bf_banner_idx + 1) ; document.getElementById(bf_bannerGraphicsID).src = bf_TabBANNER[bf_banner_idx].image.src ; document.getElementById(bf_bannerUrlID).href = (bf_TabBANNER[bf_banner_idx].url.indexOf("http") < 0) ? "http://" + bf_TabBANNER[bf_banner_idx].url : bf_TabBANNER[bf_banner_idx].url ; } // window.status = "fadingMode [" + bf_fadingMode + "] -- opacOffset [" + bf_opacOffset + "]" ; if (document.all) /* MS IE */ document.getElementById(bf_fadingContainerID).style.filter = "alpha(opacity=" + bf_opacOffset + ")" ; else /* Firefox */ document.getElementById(bf_fadingContainerID).style.opacity = (bf_opacOffset / 100) ; bf_faderThread2 = setTimeout('BannerFader("' + bf_fadingMode + '")',bf_faderRefresh) ; }