<html>
<!-- slidefbshow.html. Template HTML/Javascript for displaying a
- foreground/background "split" slideshow.
- Purpose:
- Slidefbshow is used to display a "slide show" that has been divided
- into a single foreground image and a single background image per "slide".
-
- This division is a very powerful way to efficiently compact many
- PowerPoint presentations for display on the web -- because the typical
- powerpoint presentation has a background that renders well as a
- JPEG, while the foreground renders well as a GIF. For more details
- about the division process, see http://thedance.net/~roth/CAC.
-
- Usage:
- This page assumes it lives in the same directory with the images
- that make up the "slides", where the foreground images are called
- 'slideNNN.gif' and the background images are called "backgroundN.jpg".
- Set the assignment of 'last' to be the number of the last foreground
- image. Define the 'bkg' array (as shown below) to be the array
- of background images that go with the respectively numbered foreground
- images.
-
- It is assumed that all of the images (foreground and background)
- have the same size. The images b1,b2,b3,b4 & b8.gif are for the
- VCR controls. (Clicking on the image itself has the same effect
- as clicking on the "forward" button.)
-
- How it works:
- Assumes IE 5.01 or Netscape 6.x or higher. (Will not work on Netscape 4.)
-
- Puts the background image in the background of a table cell, and
- the foreground image in the cell itself. Uses the style-sheet
- background-image property to change backgrounds.
-
- Once a foreground image has finished loading, attempts to preload the
- "next" (foreground) slide while the user is reading the current
- slide. If successful, makes the slideshow appear to display *much*
- faster.
-
- Author: Charles Roth (www.thedance.net)
-
- Change history:
- 7/8/02 v1.1 New page.
-
-->
<head>
<script language="Javascript">
last = 120; /* Number of last foreground slide image. */
first = 1;
slide = first; /* current slide */
/*** Define bkg array to have matching background images. Note that
/ the 'url(...)' syntax is required, since we're using style-sheets
/ to make changing the background image work. */
bkg = new Array();
for (i=1; i<=last; ++i) bkg[i] = "url(background1.jpg)";
bkg[ 8] = "url(background2.jpg)";
bkg[ 9] = "url(background2.jpg)";
bkg[ 21] = "";
bkg[ 29] = "url(background3.jpg)";
bkg[ 30] = "url(background3.jpg)";
bkg[ 31] = "url(background3.jpg)";
bkg[118] = "url(background4.jpg)";
var cell; /* main table cell object, for convenient reference */
var next_slide; /* name of next slide, so we can do preloading trick */
var preload_gif = new Image();
/*** All VCR buttons activate this function, with slide # to go to. */
function move_to_slide (number) {
slide = number;
if (slide > last) slide = last;
if (slide < first) slide = first;
if (! cell) cell = document.getElementById ("tdback");
/*** Only change background image if we have to -- otherwise may
/ cause some flicker. */
if (cell.style.backgroundImage != bkg[slide])
cell.style.backgroundImage = bkg[slide];
/*** Now load foreground image, after preparing it (the image object)
/ to preload the next slide if possible. */
if (slide < last) next_slide = "slide" + to_digits (slide+1, 3) + ".gif";
document.slidegif.src = null; /* Empty current slide */
document.slidegif.onload = preload_next_slide;
document.slidegif.src = "slide" + to_digits (slide, 3) + ".gif";
return false;
}
/*** Actually do the preloading, if fired by onLoad condition on current
/ slide. */
function preload_next_slide() {
if (next_slide) preload_gif.src = next_slide;
}
/*** Dumb function to convert number to zero-padded string. */
function to_digits (snum, digits) {
var str_form = snum + "";
while (str_form.length < digits) str_form = "0" + str_form;
return (str_form);
}
/*** Confirm closing window. */
function closer () {
if (confirm ("OK to close window?")) window.close();
return false;
}
</script>
<!-- Don't let background image "tile" if not exactly same size as
foreground! -->
<style>
TD { background-repeat: no-repeat }
</style>
</head>
<body bgcolor="#808080">
<!-- Position table at absolute top left of window -->
<span style="position:absolute; left:0; top:0">
<table border=0>
<tr>
<td id=tdback style="background-image: url(background1.jpg);"
><a href="#" onClick="return move_to_slide (slide+1);"
><img name="slidegif" src="slide001.gif" border=0 ></a></td>
</td>
<td> </td>
<!-- VCR buttons -->
<td>
<table cellspacing=0 cellpadding=0 border=0>
<tr><td><a href="#" onClick="return move_to_slide (first);"
><img src="b1.gif" border=0></a></td>
<tr><td><a href="#" onClick="return move_to_slide (last);"
><img src="b4.gif" border=0></a></td>
<tr><td><a href="#" onClick="return move_to_slide (slide-1);"
><img src="b2.gif" border=0></a></td>
<tr><td><a href="#" onClick="return move_to_slide (slide+1);"
><img src="b3.gif" border=0></a></td>
<tr><td> </td>
<tr><td><a href="#" onClick="return closer();"
><img src="b8.gif" border=0></a></td>
<tr><td> </td>
</table>
</td>
</table>
</span>
</body>
</html>