Demo36: Image Flipper     |     home
Step 1
Step 1
Copy and paste the following code onto your CSB page using Insert > HTML Code.  Note: there is NO modification required to this script.

<HEAD>
<SCRIPT language="javascript">
<!-- Sheilds up
// Image Flipper -  Cameron Gregory - http://www.bloke.com/
// http://www.bloke.com/javascript/Flipper/
// http://www.bloke.com/javascript/Flipper/link.html

function changeImage(r,i)
{
r.src=i;
}

function goFlipURL()
{
  document.location = urlSet[currentFlip];
}

function flipFlipper(imageSet,speed)
{
  currentFlip ++;
  if (currentFlip == imageSet.length)
    currentFlip=0;
  changeImage(document.flip,imageSet[currentFlip]);
  setTimeout("flipFlipper(imageSet,speed)", speed)
}

function FlipperLong(width,height,s,images)
{
/* si: start index
** i: current index
** ei: end index
** cc: current count
*/
 speed = s;
 si = 0;
 ci=0;
 cc=0;
 imageSet = new Array();
 ei = images.length;
  for (i=1;i<ei;i++) {
    if (images.charAt(i) == ' ') {
      imageSet[cc] = images.substring(si,i);
      cc++;
      si=i+1;
      }
    }
  currentFlip = 0;
 document.write("<img name='flip'");
 if (width >0)
    document.write("width="+width);
 if (height >0)
    document.write(" height=" +height);
  document.writeln(" src=" +imageSet[0]+ ">");

  setTimeout("flipFlipper(imageSet,speed)", speed)
}

function Flipper(width,height,images)
{
  speed=5000;
  FlipperLong(width,height,speed,images);
}


function FlipperLinkLong(width,height,s,images,urls)
{
/* si: start index
** i: current index
** ei: end index
** cc: current count
*/
 speed = s;
 imageSet = new Array();
 urlSet = new Array();

 si = 0;
 ci=0;
 cc=0;
 ei = images.length;
  for (i=1;i<ei;i++) {
    if (images.charAt(i) == ' ') {
      imageSet[cc]= images.substring(si,i);
      cc++;
      si=i+1;
      }
    }

 si = 0;
 ci=0;
 ccu=0;
 ei = urls.length;
  for (i=1;i<ei;i++) {
    if (urls.charAt(i) == ' ') {
      urlSet[ccu]= urls.substring(si,i);
      ccu++;
      si=i+1;
      }
    }

  currentFlip = 0;
 document.write("<a href=\"javascript:goFlipURL()\"><img name='flip'");
 document.write("<img name='flip'");
 if (width >0)
    document.write("width="+width);
 if (height >0)
    document.write(" height=" +height);
  document.writeln(" src=" +imageSet[0]+ "></a>");

  setTimeout("flipFlipper(imageSet,speed)", speed)
}

function FlipperLink(width,height,images,urls)
{
  speed=5000;
  FlipperLinkLong(width,height,speed,images,urls);
}

// sheilds down -->
</SCRIPT>
</head>