Here is a simplified sample of one technique. I will explain it:
<html>
<head>
<title>Photo Swap</title>
<script type="text/javascript"><!--
var images = new Array();
images[0] = "small1.jpg";
images[1] = "small2.jpg";
images[2] = "small3.jpg";
images[3] = "small4.jpg";
images[4] = "small5.jpg";
images[5] = "small6.jpg";
images[6] = "small7.jpg";
images[7] = "small8.jpg";
images[8] = "small9.jpg";
images[9] = "images/Uncle-Chutney(glasses).gif";
var pic;
var index = 0;
function swapImage()
{
pic.src = images[index];
if (index == images.length - 1) index = 0;
else index++;
}
// --></script>
</head>
<body>
<p><img id="baby" src="small1.jpg" width="239" height="248" alt="Baby"
/></p>
<script type="text/javascript"><!--
pic = document.getElementById("baby");
setInterval("swapImage()", 10000);
// --></script>
</body>
</html>
There is only one HTML element in the page, an image, which you should be
able to see I've given an id of "baby." The id makes it easier for the
scripting to find it.
In the <head> of the document is a script which creates an array of strings
(called "images"). Each string in the array is the URL of an image in the
web. Note the last one, which looks more like a URL than the rest of them.
There is also a function defined, called "swapImage()."
An image has a "src" attribute which specifies the URL of the image. The
swapImage() function finds the image with the id of "baby" (see the
scripting below this, which sets the variable "pic" to the image). It uses
the variable "index" and the variable "pic" (the image element itself) to
swap the image. "index" is the index of the URL in the "images" array. The
function sets the "src" attribute to the URL at "index" in the array. It
then increments the "index" unless it is the value of the highest index in
the array, in which case it sets it to 0. This causes the array to be looped
through as many times as desired.
The line of code in the body of the page, which reads
'setInterval("swapImage()", 10000)' is the trigger. The "setInterval"
JavaScript function causes a timer to be set to fire at the interval
specified (milliseconds - 10000 is 10 seconds). The timer runs the
"swapImage()" function each time.
--
HTH,
Kevin Spencer
Microsoft MVP
Chicken Salad Surgery
It takes a tough man to make a tender chicken salad.
Transam388 said:
Is there a way to set FrontPage 2003 based pages to have a photo displayed
and then constantly change the photo on a set time like every 10 seconds?
So
you select all the files you want displayed and then set the area and time
in
between changes then when a viewer stays on the page the photo that is
shown
will keep changing. Thanks for any help!!
