Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
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