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-bgslides-effect.htm / htm



  
  <!-- THREE STEPS TO INSTALL 2-WAY BACKGROUND IMAGES SLIDES:
  
    1.  Copy the coding into the HEAD of your HTML document
    2.  Add the onLoad event handler into the BODY tag
    3.  Put the last coding into the HEAD of your HTML document - Optional  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <SCRIPT LANGUAGE="JavaScript">
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Begin
  // (C) 2001 www.CodeLifter.com
  // http://www.codelifter.com
  // Free for all users, but leave in this  header
  
  // =======================================
  // set the following variables
  // =======================================
  
  // Set speed (milliseconds)
  var speed = 1000
  
  // 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] = '@logo.gif'
  Pic[1] = '@alchemy.gif'
  Pic[2] = '@walk.gif'
  Pic[3] = '@keiko.gif'
  
  // do not edit anything below this line
  
  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 runBGSlideShow(){
     if (document.body){
     document.body.background = Pic[j];
     j = j + 1
     if (j > (p-1)) j=0
     t = setTimeout('runBGSlideShow()', speed)
     }
  }
  //  End -->
  </script>
  
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <body onload="runBGSlideShow()">
  
  <!-- STEP THREE: Copy this code into the HEAD of your HTML document  -->
  
  Method One - Positionable Images
  ----------
  
  Put the following style sheet in the <head> of
  your page.  Normally it will go *before* the script above.
  
  <style>
  body{
  background-repeat: no-repeat;
  background-position: 200 100;
  }
  </style>
  
  Set the position x y in pixels in the background-position
  element to position the images in the page.  Do not use
  commas between the values!
  
  Method Two - Full Page-Space Background
  ----------
  
  Easy - just omit the style script above from the page.
  The background images will then repeat across the page, as
  usual.
  
  <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:  2.50 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.