Free Webdesign Tutorials:: BG Effects: Colorizer

Web Designing Made Easy	Add to Favourites	Tell a Friend
Web Designing Made Easy	Print this Page	Make Your Home Page

Create Free Websites

Free Web Tools

Free Keywords Software

Free Web Tools

Free JavaScripts

Other Services

Quick Links

Submit a Tutorial

Links

Free Resources

Translate a webpage in your Language

Earn money with your website

Suggestions

META Tag Generator

HTML Encryptor

Check Site Popularity

Search Suggestion Tool

Menu Generator

Ads Network

Home |Advertise | Contact Us | Free Resources | Submit a Tutorial

Floating Transparent SlideShow

This script creates a floating layer, within which is an automatic slide show that includes fade transitions. The slideshow cycles through the images that you specify.

BG Effects: Floating Transparent SlideShow
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

  <BODY onLoad="runSlideShow()">   <div id="FloatSlideShow" style="position:absolute;z-index:1000000"> <a href="http://www.codebrain.com" target=_new> <img border=0 src="float1_trans.gif" name='SlideShow' width=200 height=200></a> </div>  <script> // You *must* add onload="runSlideShow()" to the <body> tag // of the page. // In the section marked Edit the HTML, above, remember to // set the path and size for the first image. // ======================================= // Set the following variables // ======================================= // Set slideShowSpeed (milliseconds): var slideShowSpeed = 3000 // Duration of crossfade (seconds) for IE: var crossFadeDuration = 3 // Set the positioning variables, below: // Negative numbers are relative to right (whereX) or bottom (whereY) // Positive numbers are relative to left (whereX) or (whereY) top // Experiment with values to get positioning exact, and allow // for the dimensions of the image in the positioning var whereX = 140; var whereY = -233; // Specify the image files: var Pic = new Array() // don't touch this! // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'float1_trans.gif' Pic[1] = 'float2_trans.gif' Pic[2] = 'float3_trans.gif' Pic[3] = 'float4_trans.gif' Pic[4] = 'float5_trans.gif' // ======================================= // Do not edit *anything* below this line! // ======================================= var nn=(navigator.appName.indexOf("Netscape")!=-1); var t;var j=0;var p=Pic.length;var preLoad=new Array(); for (i=0;i<p;i++){preLoad[i]=new Image();preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();} if (document.all || document.getElementById){document.images.SlideShow.src = preLoad[j].src;}else{ document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;} if (document.all){document.images.SlideShow.filters.blendTrans.Play();} j=j+1;if (j>(p-1))j=0;t=setTimeout('runSlideShow()', slideShowSpeed);} var dD=document,dH=dD.phpl,dB=dD.body,px=dD.layers?'':'px'; function floatSS(iX,iY,id){ var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id]; this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY; L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var pX, pY; pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth; pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop; if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight; this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY); setTimeout(this.id+'O.Fss()',33);};return L;} floatSS(whereX,whereY,'FloatSlideShow').Fss(); </script>  <p><center> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://www.freewebknowledge.com/jscodes.php">Free JavaScripts</a></font> </center><p>

Free JavaScripts