Flipbook

My friend in San Francisco has been making sketches on his BART rides to work in Cupertino. He wanted to make a web-based flipbook to show these to people. His e-mail said, "I've been trying to install Microsoft Office 97, which includes Powerpoint, but it's a bear to install-- 35 disk images. My machine crashes trying to deal with it..." He wanted to have Powerpoint because "it can make a little web sketchbook that you can leaf through."
Being no friend of Microsoft, and a friend of my friend, I wrote the following JavaScript flipbook tutorial. You can see it in action here (Netscape 3+ and IE 4+)
I don't know for sure, but I'd say the people at Powerpoint are probably implementing Java to do this flipbook on the web; and if they aren't, one might not not want to use it, because that would mean that it's implemented with plugins or ActiveX-- which both have their drawbacks.
The effect of a flipbook could also be achieved with JavaScript 1.1 capable browsers using a table and the onClick event, which could trigger a replacement of the images. Something like this: 
_________________
|pageL      pageR|
| but        but |
|                |
| LEFT     RIGHT |
|  IMG      IMG  |
------------------
<table cellpadding=10 cellspacing=0 border=0 >
<tr>
<td>
      <a onClick="pageLeft()" href="javascript://" >
      <IMG SRC=PAGEL.GIF></a>
</td>
<td>
      <a onClick="pageRight() href="javascript://">
      <IMG SRC=PAGER.GIF></a>
</td>
</tr>
<tr>
<td><IMG SRC=p0.GIF></td><td> <IMG SRC=p1.GIF></td>
</tr>
</table>
Where the Javascript (in the header) looks like:

<SCRIPT LANGUAGE="JavaScript1.1">
var numpages = 5;
var curLeftPage = 2;
page0 = new Image(100,150);
page1 = new Image(100,150);
page2 = new Image(100,150);
page3 = new Image(100,150);
page4 = new Image(100,150);
page0.src = "p0.gif";
page1.src = "p1.gif";
page2.src = "p2.gif";
page3.src = "p3.gif";
page4.src = "p4.gif";
imgs = new Array(page0,page1,page2,page3,page4);

function pageLeft(){
if(curLeftPage>0) curLeftPage--;
else curLeftPage = numpages-2;

}
function pageRight(){
if(curLeftPage<(numpages-2)) curLeftPage++;
else curLeftPage=0; }

</SCRIPT>