Crossbrowser fade-in-fade-out - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Crossbrowser fade-in-fade-out		[View Sample]

Fade-in-fade-out-effect for your all your image-presentations, diashows etc. Cross-browser.


Insert into <HEAD>
<style type="text/css"> .redirstyle { position:absolute; left:50px; top:200px; width:600px; font-family:Arial; font-size:10pt; color:000000; } .textstyle { position:absolute; left:-2000px; width:300px; } A { color:000000; } .coverstyle { position:absolute; left:-2000px; } </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - // CREDITS: // TCrossbrowser fade-in-fade-out for your web dia show by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 2/8/2000 // // The trick of this script is a simple gif-image (slidefader82.gif) // consisting of two colors: black and white dots. // The black dots are transparent. // By wiping this gif-image back and forth over the // images of your dia-show you get an attractive dissolving effect. // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a link to http://www.24fun.ch on the webpage // CONFIGURATION: // Copy the <DIV>-blocks called "textstyle" and "cover" and paste them just // below the body-tagof your HTML-file. // Copy the script-block and style-block and paste it into the head-zone of your HTML-file. // Copy the image-file "slidefader82.gif" and put it in the same directory as your HTML-file. // Configure the variables below: // The URLS of the images for your dia-show. You can use as many // images as you like. Take care that they are preloaded (see just below). // ATTENTION: Your images shouldn't be bigger than 95 pixels height and 270 pixels width. var message = new Array() message[0]="<img src='zetaOne82.jpg'>" message[1]="<img src='zetaTwo82.jpg'>" message[2]="<img src='zetaThree82.jpg'>" // Preload the images of your dia-show. var picOne=new Image() picOne.src="zetaOne82.jpg" var picTwo=new Image() picTwo.src="zetaTwo82.jpg" var picThree=new Image() picThree.src="zetaThree82.jpg" var i_message=0 // Configure the left and top margin of the images (pixels). var covertop=20 var coverleft=50 // The size of slidefader82.gif var coverwidth=1200 var coverheight=96 var texttop=covertop var textleft=coverleft var textwidth=300 var textheight=coverheight var cliptop=0 var clipright=textwidth var clipbottom=coverheight var clipleft=0 var clippoints // Configure the speed of the wiping effect var step=40 var pause=50 var timer function init() { if (document.all) { document.all.text.style.posTop=texttop document.all.text.style.posLeft=textleft document.all.cover.style.posTop=covertop document.all.cover.style.posLeft=coverleft clipleft=0 fadeout() } if (document.layers) { document.text.top=texttop document.text.left=textleft document.cover.top=covertop document.cover.left=coverleft clipleft=0 fadeout() } } function fadeout() { if (document.all) { if (document.all.cover.style.posLeft >=(-coverwidth+textwidth+coverleft+step)) { window.status=-coverwidth+textwidth+coverleft+step clipleft+=step clipright=clipleft+textwidth clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.cover.style.clip=clippoints document.all.cover.style.posLeft-=step timer= setTimeout("fadeout()",pause) } else { clearTimeout(timer) i_message++ if (i_message>=message.length) {i_message=0} text.innerHTML=message[i_message] fadein() } } if (document.layers) { if (document.cover.left >=(-coverwidth+textwidth+coverleft+step-22)) { window.status=-coverwidth+textwidth+coverleft+step clipleft+=step clipright=clipleft+textwidth document.cover.clip.top=cliptop document.cover.clip.left=clipleft document.cover.clip.bottom=clipbottom document.cover.clip.right=clipright document.cover.left-=step timer= setTimeout("fadeout()",pause) } else { clearTimeout(timer) i_message++ if (i_message>=message.length) {i_message=0} document.text.document.write(message[i_message]) document.text.document.close() fadein() } } } function fadein() { if (document.layers) { if (document.cover.left<=coverleft) { clipleft-=step clipright=clipleft+textwidth document.cover.clip.top=cliptop document.cover.clip.left=clipleft document.cover.clip.bottom=clipbottom document.cover.clip.right=clipright document.cover.left+=step timer= setTimeout("fadein()",pause) } else { clearTimeout(timer) init() } } if (document.all) { if (document.all.cover.style.posLeft<=coverleft) { clipleft-=step clipright=clipleft+textwidth clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.cover.style.clip=clippoints document.all.cover.style.posLeft+=step timer= setTimeout("fadein()",pause) } else { clearTimeout(timer) init() } } } // - End of JavaScript - --> </SCRIPT>

Insert into <BODY>
<BODY bgcolor=FFFFFF style="width:100%;overflow-x:hidden;overflow-y:scroll" onLoad="init()"> <DIV ID="text" class="textstyle"></DIV> <DIV ID="cover" class="coverstyle"><img src="slidefader82.gif"></DIV> <DIV ID="redir" class="redirstyle"><b>Fade-in-Fade-out transition effect for your images:</b><br>Cross-browser fade-in-fade-out-effect for your image-presentations, diashows etc.<br><br><b>Instructions for configuration:</b><br>See head-zone of the file "slidedfaderimg.html". <br><br><b>More free DHTML and JavaScripts downloads:</b><br><a href="http://www.24fun.ch" target="_blank">Download over 200 free copy&paste samples from http://www.24fun.ch</a></DIV>

Other Options