« »

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

Label: Crossbrowser fade-in-fade-out for web-images

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<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
	-->

Copy All x2

<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=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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<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
	-->