<![CDATA[
<HTML>
<HEAD>
<TITLE>Slide Show</TITLE>
<!-- slide2.txt: text version of slide2.html -->
<STYLE Type="text/css">
<!--
H1 { font: 24px Verdana, sans-serif;
margin-top: 12px; margin-left: 12px; }
#image1 { position: absolute; top: 120px; left: 100px;
visibility: visible; }
#image2 { position: absolute; top: 100px; left: 300px;
visibility: hidden; }
#image3 { position: absolute; top: 120px; left: 150px;
visibility: hidden; }
#image4 { position: absolute; top: 150px; left: 200px;
visibility: hidden; }
#image5 { position: absolute; top: 70px; left: 300px;
visibility: hidden; }
-->
</STYLE>
<SCRIPT Language="JavaScript">
<!--
/* Check to see if the browser is Explorer, which it is
if it recognizes the "document.all" object */
var ie = false;
if (document.all) ie = true;
/* Create a variable to store our looping method.
Its initial value is null. */
var rerun;
/* Create a variable to keep track of which layer is
currently visible (this is initially 'image1'): */
var tracker = 1;
function nextImage() {
/* Construct layers names for the visible layer and
the next layer */
/* First, identify the visible layer, whose ID is the
string "imageX," where "X" is the value of "tracker." */
var visibleLayer;
if (ie) visibleLayer = document.all['image' + tracker].style;
else visibleLayer = document.layers['image' + tracker];
/* Now identify the next layer. If tracker is less than 5,
add one to find the index; if tracker is 5, go back to
the first image: */
if (tracker < 5) tracker++;
else tracker = 1;
var nextLayer;
if (ie) nextLayer = document.all['image' + tracker].style;
else nextLayer = document.layers['image' + tracker];
/* Now hide the "visibleLayer" and show the "nextLayer": */
visibleLayer.visibility = (ie) ? 'hidden' : 'hide';
nextLayer.visibility = (ie) ? 'visible' : 'show';
/* Now set the function to run again, using the new
value of tracker, in 5 seconds (5000 msec) and exit: */
rerun = setTimeout('nextImage()',5000);
}
/* Now let's add some code to move the button around, between
a leftmost position of 100px and a rightmost position of 400px */
// New variables:
var movingLeft = true; // true while left value increases
var currentPosition = 100; // left position, in pixels
var rerunButton; // stores repeating task
function moveButton() {
/* Check the value of movingLeft; if itÕs
true, see how currentPosition compares
with 400. If less than 400, add 5 pixels
to it; if itÕs reached 400, turn around (set
movingLeft to ÒfalseÓ) and subtract 5 pixels
*/
if (movingLeft) {
if (currentPosition < 400) currentPosition += 5;
else { movingLeft = false; currentPosition -= 5; }
} else {
/* If weÕve gotten here, we're moving right.
Compare the value of currentPosition with 100.
If greater than 100, subtract 5 pixels; if itÕs
reached 100, turn around (set movingLeft to
ÒtrueÓ) and add 5 pixels
*/
if (currentPosition > 100) currentPosition -= 5;
else { movingLeft = true; currentPosition += 5; }
}
/* now move the layer to the new position: */
if (ie) stopButton.style.left = currentPosition;
else document.stopButton.left = currentPosition;
// and start all over
rerunButton = setTimeout('moveButton()',10);
}
function stopShow() {
if (rerun) clearTimeout(rerun);
if (rerunButton) clearTimeout(rerunButton);
var stopLayer = (ie) ?
stopButton.style : document.stopButton;
var startLayer = (ie) ?
startButton.style : document.startButton;
stopLayer.visibility = (ie) ? 'hidden' : 'hide';
startLayer.visibility = (ie) ? 'visible' : 'show';
stopLayer.left = 100;
currentPosition = 100;
}
function startShow() {
rerun = setTimeout('nextImage()',50);
rerunButton = setTimeout('moveButton()',100);
var stopLayer = (ie) ?
stopButton.style : document.stopButton;
var startLayer = (ie) ?
startButton.style : document.startButton;
stopLayer.visibility = (ie) ? 'visible' : 'show';
startLayer.visibility = (ie) ? 'hidden' : 'hide';
}
// -->
</SCRIPT>
</HEAD>
<BODY BgColor="#000000" Text="#f6e48e"
onLoad="nextImage(); moveButton();">
<H1>InterActivity: Dynamic HTML Demo</H1>
<DIV ID="stopButton" Style="position: absolute; top: 70px; left: 100px;
visibility: visible;">
<FORM><INPUT Type="button" Value="stop"
onClick="stopShow();"></FORM>
</DIV>
<DIV ID="startButton" Style="position: absolute; top: 70px; left: 100px;
visibility: hidden;">
<FORM><INPUT Type="button" Value="start"
onClick="startShow();"></FORM>
</DIV>
<DIV ID=image1>
<IMG SRC="image1.gif" WIDTH=96 HEIGHT=96 Alt="first image">
</DIV>
<DIV ID=image2>
<IMG SRC="image2.jpg" WIDTH=268 HEIGHT=196 Alt="second image">
</DIV>
<DIV ID=image3>
<IMG SRC="image3.jpg" WIDTH=264 HEIGHT=148 Alt="third image">
</DIV>
<DIV ID=image4>
<IMG SRC="image4.gif" WIDTH=150 HEIGHT=150 Alt="fourth image">
</DIV>
<DIV ID=image5>
<IMG SRC="image5.jpg" WIDTH=201 HEIGHT=300 Alt="fifth image">
</DIV>
<DIV ID=source Style="position:absolute; top: 250; left: 50px; z-index: 0;
include-source: url('slide2.txt')"></DIV>
</BODY>
</HTML>
]]>