Full version: jsB@nk » Image » Rotation » Crossbrowser fade-in-fade-out for web-images
URL: https://www.javascriptbank.com/crossbrowser-fade-in-fade-out-for-web-images.html
Fade-in-fade-out-effect for your all your image-presentations, diashows etc. Cross-browser.
Full version: jsB@nk » Image » Rotation » Crossbrowser fade-in-fade-out for web-images
URL: https://www.javascriptbank.com/crossbrowser-fade-in-fade-out-for-web-images.html
<STYLE type=text/css>.redirstyle {COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 10pt; LEFT: 50px; POSITION: absolute; TOP: 200px; WIDTH: 600px}.textstyle {LEFT: -2000px; POSITION: absolute; WIDTH: 300px; text-align: center;}A {COLOR: #000000}.coverstyle {LEFT: -2000px; POSITION: absolute;}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript><!-- Beginning of JavaScript -// 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 height=96 src='photo1.jpg'>"message[1]="<img height=96 src='photo2.jpg'>"message[2]="<img height=96 src='photo3.jpg'>"// Preload the images of your dia-show.var picOne=new Image()picOne.src="photo1.jpg"var picTwo=new Image()picTwo.src="photo2.jpg"var picThree=new Image()picThree.src="photo3.jpg"var i_message=0// Configure the left and top margin of the images (pixels).var covertop=20var coverleft=50// The size of slidefader82.gifvar coverwidth=1200var coverheight=96var texttop=covertopvar textleft=coverleftvar textwidth=300var textheight=coverheightvar cliptop=0var clipright=textwidthvar clipbottom=coverheightvar clipleft=0var clippoints// Configure the speed of the wiping effectvar step=40var pause=50var timerfunction 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+textwidthdocument.cover.clip.top=cliptopdocument.cover.clip.left=clipleftdocument.cover.clip.bottom=clipbottomdocument.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+textwidthdocument.cover.clip.top=cliptopdocument.cover.clip.left=clipleftdocument.cover.clip.bottom=clipbottomdocument.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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=init() style="overflow-x: hidden;" topmargin=130px><DIV class=textstyle id=text></DIV><DIV class=coverstyle id=cover><IMG src="slidefader82.gif" width="1200" height="96"></DIV></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->