Flipper

Flipper

Instructions:

The flipper is a Java script mini program that alternates images like an animated gif. Copy the first java script code below and paste it into your webpage html code between the <HEAD> and <TITLE> section. Next copy and paste the second portion where you would like the images located between the html code already listed and the <END>. Change the images listed to list your own images. Make sure you keep a single space between each image just as it is shown below. Do not crowd the area where your images will be displayed or the program will not run. Changing the 5000 number to another number can change the speed of the images. The size of your images and number of images in your line-up will also affect the speed of your flipper. Cameron Gregory wrote this java script code and his website is listed in the intro of the code. You can visit his page to see a really good example of what can be done with the flipper. I also have some images set up on http://www.public.asu.edu/~pbaluch/flipper.html.

Flipper Java Script:

<HEAD>

<!-- 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>

<Title>

*Webpage html code*

<END>

Website maintained by Page Baluch: debra.baluch@asu.edu

Last updated 2/5/2000