topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-javascript-effect-slide-show-effect.htm / htm



  
  <!-- TWO STEPS TO INSTALL FLOATING TRANSPARENT SLIDESHOW:
  
    1.  Add the onLoad event handler into the BODY tag
    2.  Copy the coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Insert the onLoad event handler into your BODY tag  -->
  <script src=graphic-javascript-effect-slide-float-script.js></script>
  
  <BODY onLoad="runSlideShow()">
  
  <!-- STEP TWO: Paste this code into the BODY of your HTML document  -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  <!-- Original:  CodeLifter -->
  <!-- Web Site:  http://www.codelifter.com/ -->
  <!-- Edit the HTML: Set first image path and size //-->
  <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>
  <!-- End of editable HTML //-->
  
  <script>
  
  /* Floating Slide Show Script C.2004 by CodeLifter.com */
  
  // 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] = 'graphic-javascript-effect-slide-float1-trans.gif'
  Pic[1] = 'graphic-javascript-effect-slide-float2-trans.gif'
  Pic[2] = 'graphic-javascript-effect-slide-float3-trans.gif'
  Pic[3] = 'graphic-javascript-effect-slide-float4-trans.gif'
  Pic[4] = 'graphic-javascript-effect-slide-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.html,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>
  
  <!-- END FLOATING SLIDE SHOW CODE //-->
  
  <p><center>
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  3.80 KB -->
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.