The user has already used links in HTML to load one page from another. Using the tag
<a href="nextpage.htm">Click for next page</a>
the user can construct a sequence of pages that will allow the user to load succesive pages at will. Since the viewer has already done so in the HTML tutorial we will not repeat this here.
For the first method we show how the user can also load five succesive pages, "pagea1.htm" ... "pagea5.htm". We use the tag
< a href="javascript:functionname()">Click to call function</a>
to load succesive pages. This tag will allow us to later to load pages in random order. Here the term "javascript" indicates that the expression after the colon, "functionname()" refers to a function defined in the head part of the web page. By clicking on this "link" the function "functionname()" is called and executed. The slide show starts with a main page "maina.htm" which will be used to start the slide show.
1: <html>
2: <head>
3: <title>maina</title>
4: <script language=javascript>
5: var q;
6: function pagea()
7: {
8: q=1;
9: document.location.href="pagea"+q+".htm";
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black>
14: <h3><center> Main Page For Series A</center></h3>
15: <hr>
16: <h4>
17: Click on the button below to see series A, the Republican Presidential Series. There are 5 pages in this series.<p>
18: <a href="javascript:pagea()">Click for series A</a>
19: </h4>
20: </body>
21: </html>
The user clicks on the "link" created in line 18 which calls function "pagea()", lines 6-10. When line 9 is executed it loads "pagea1.htm". A word about line 9 in the function "pagea()". The left side
document.location.href
is used to refer to the page to be loaded. In this case its "pagea1.htm".
1: <html>
2: <head>
3: <title>pagea1</title>
4: <script language=javascript>
5: var q;
6: function pagea()
7: {
8: q=2;
9: document.location.href="pagea"+q+".htm";
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black>
14: <h3><center> First page of series A</center></h3>
15: <hr>
16: <h4>The life and times of General and then President Eisenhower.<p>
17: <center><img src="eisenhow.gif" width=86 height=101></center><p>
18: Click on the button below to see the next page in this series.<p>
19: <a href="javascript:pagea()">Click for next page</a>
20: </h4>
21: </body>
22: </html>
When "pagea1.htm" is loaded the next page can be loaded by clicking on the "link" created by line 19. This process is repeated for the rest of the web pages in this slide show.
1: <html>
2: <head>
3: <title>pagea2</title>
4: <script language=javascript>
5: var q;
6: function pagea()
7: {
8: q=3;
9: document.location.href="pagea"+q+".htm";
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black>
14: <h3><center> Second page of series A</center></h3>
15: <hr>
16: <h4>
17: <center>The life and times of President Nixon.</center><p>
18: <center><img src="nixon.gif" width=86 height=101></center><p>
19: Click on the button below to see the next page in this series.<p>
20: <a href="javascript:pagea()">Click for next page</a>
21: </h4>
22: </body>
23: </html>
1: <html>
2: <head>
3: <title>pagea3</title>
4: <script language=javascript>
5: var q;
6: function pagea()
7: {
8: q=4;
9: document.location.href="pagea"+q+".htm";
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black>
14: <h3><center> Third page of series A</center></h3>
15: <hr>
16: <h4>
17: <center>The life and times of President Ford.</center><p>
18: <center><img src="ford.gif" width=86 height=101></center><p>
19: Click on the button below to see the next page in this series<p>
20: <a href="javascript:pagea()">Click for next page</a>
21: </h4>
22: </body>
23: </html>
1: <html>
2: <head>
3: <title>pagea4</title>
4: <script language=javascript>
5: var q;
6: function pagea()
7: {
8: q=5;
9: document.location.href="pagea"+q+".htm";
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black>
14: <h3><center> Fourth page of series A</center></h3>
15: <hr>
16: <h4>
17: <center>The life and times of President Reagan.</center><p>
18: <center><img src="reagan.gif" width=86 height=101></center><p>
19: Click on the button below to see the main page in this series<p>
20: <a href="javascript:pagea()">Click for next page</a>
21: </h4>
22: </body>
23: </html>
1: <html>
2: <head>
3: <title>pagea5</title>
4: <script language=javascript>
5: function pagea()
6: {
7: document.location.href="maina.htm";
8: }
9: </script>
10: </head>
11: <body bgcolor=yellow text=black>
12: <h3><center> Fifth page of series A</center></h3>
13: <hr>
14: <h4>
15: <center>The life and times of President Bush.</center><p>
16: <center><img src="bush.gif" width=86 height=101></center><p>
17: Click on the button below to see the main page in this series.<p>
18: <a href="javascript:pagea()">Click for next page</a>
19: </h4>
20: </body>
21: </html>
There are five pages, "p1.htm" ... "p5.htm", in the next slide show. The method used to load succesive pages automatically depends on the HTML tag
<meta .... >
This tag can be used to "refresh" the page by either reloading it or by loading another page at given time intervals.
1: <html>
2: <head>
3: <meta http-equiv="refresh" content="10; url=p2.htm"
4: <title>p1</title>
5: </head>
6: <body bgcolor=yellow text=black>
7: <h1><center>Page 1</center></h1>
8: <h4>
9: This is the first page of series G. In about 10 seconds you will see the next page in this series.
10: </h4>
11: </body>
12: </html>
The meta tag in line 3 uses
http-eqiv="refresh"
to "refresh" the page after a 10 second interval by loading page "p2.htm". By increasing the content number the slide action can be slowed, and by decreasing that number the slide action can be made faster.
1: <html>
2: <head>
3: <meta http-equiv="refresh" content="10; url=p3.htm"
4: <title>p2</title>
5: </head>
6: <body bgcolor=yellow text=black>
7: <h1><center>Page 2</center></h1>
8: <h4>
9: This is the second page of series G. In about 10 seconds you will see the next page in this series.
10: </h4>
11: </body>
12: </html>
The meta tags in the reast of the pages of this series, "p2.htm"-"p5.htm" act the same way.
1: <html>
2: <head>
3: <meta http-equiv="refresh" content="10; url=p4.htm"
4: <title>p3</title>
5: </head>
6: <body bgcolor=yellow text=black>
7: <h1><center>Page 3</center></h1>
8: <h4>
9: This is the third page of series G. In about 10 seconds you will see the next page in this series.
10: </h4>
11: </body>
12: </html>
1: <html>
2: <head>
3: <meta http-equiv="refresh" content="10; url=p5.htm"
4: <title>p4</title>
5: </head>
6: <body bgcolor=yellow text=black>
7: <h1><center>Page 4</center></h1>
8: <h4>
9: This is the fourth page of series G. In about 10 seconds you will see the next page in this series.
10: </h4>
11: </body>
12: </html>
1: <html>
2: <head>
3: <meta http-equiv="refresh" content="10; url=p1.htm"
4: <title>p5</title>
5: </head>
6: <body bgcolor=yellow text=black>
7: <h1><center>Page 5</center></h1>
8: <h4>
9: This is the fifth page of series G. In about 10 seconds you will see the first page in this series.
10: </h4>
11: </body>
12: </html>
In the next slide show we have a main page, "mainb.htm", used to start the slide show, and the pages "pageb1.htm" ... "pageb5.htm" which make up the slide show itself. The mechanism used to load the succesive pages is the the "onLoad" feature of the body tag which is used to call a function as soon as the page is loaded, and a timing device already encountered in the last part. To start the slide show we load the page "mainb.htm" and click on the link created by line 18. This calls the function "pageb()", lines 6-10. Lines 8 and 9 load the page "pageb1.htm".
1: <html>
2: <head>
3: <title>mainb</title>
4: <script language=javascript>
5: var q;
6: function pageb()
7: {
8: q=1;
9: document.location.href="pageb"+q+".htm";
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black>
14: <h3><center> Main Page For The Automatic Loading Of Series B, The Democratic Presidents. There are five pages in this series.</center></h3>
15: <hr>
16: <h4>
17: Click on the button below to start the automatic loading of pages.<p>
18: <a href="javascript:pageb()">Click for series B</a>
19: </h4>
20: </body>
21: </html>
1: <html>
2: <head>
3: <title>pageb1 </title>
4: <script language=javascript>
5: var q;
6: function pageb()
7: {
8: q=2;
9: setTimeout("document.location.href='pageb'+q+'.htm' ", 1500);
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black onLoad="pageb()">
14: <h2> <center>First page of series B</center></h2>
15: <h4>
16: <center>The life and times of President Roosevelt.</center><p>
17: <center><img src="fdr.gif" width=86 height=101><p></center>
18: In about 15 seconds you will see the second page of this series.
19: </h4>
20: </body>
21: </html>
We note the "onLoad" feature of the tag in line 13 above. This states that as soon as the page has completed loading, the function "pageb()", lines 6-10, is called. In line 9 we encounter the "setTimeout( , )"function that acts as a timing device. The 1500 signifies the number of miliseconds that elapse before the command
document.location.href='pageb2.htm'
is executed. This last command loads pageb2.htm. This proceedure is then repeated in subsequent pages.
1: <html>
2: <head>
3: <title>pageb2 </title>
4: <script language=javascript>
5: var q;
6: function pageb()
7: {
8: q=3;
9: setTimeout("document.location.href='pageb'+q+'.htm' ", 1500);
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black onLoad="pageb()">
14: <h2> <center>Second page of series B</center></h2>
15: <h4>
16: <center>The life and times of President Truman.</center><p>
17: <center><img src="truman.gif" width=86 height=101><p></center>
18: In about 15 seconds you will see the third page of this series.
19: </h4>
20: </body>
21: </html>
In line 13 the "onLoad" feature calls the function "pageb()" as soon as page "pageb2.htm" is loaded. Then in line 9 the timing device will after 1.5 seconds execute the command
document.loacation.href='pageb3.htm'
which loads the next page in the slide presentation. This process continuous until the last page in the sequence, "pageb5.htm" is loaded. The next page to be loaded is the main page, "mainb.htm", and the slide show stops. By modifying the definition of the function "pageb()" in "pageb5.htm" to
function pageb()
{
var q=1;
setTimeout("document.location.href='pageb'+q+'.htm', 1500);
}
the slide show runs contiouosly.
1: <html>
2: <head>
3: <title>pageb3 </title>
4: <script language=javascript>
5: var q;
6: function pageb()
7: {
8: q=4;
9: setTimeout("document.location.href='pageb'+q+'.htm' ", 1500);
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black onLoad="pageb()">
14: <h2> <center>Third page of series B</center></h2>
15: <h4>
16: <center>The life and times of President Johnson.</center><p>
17: <center><img src="johnson.gif" width=86 height=101></center><p>
18: In about 15 seconds you will see the fourth page of this series.
19: </h4>
20: </body>
21: </html>
1: <html>
2: <head>
3: <title>pageb4 </title>
4: <script language=javascript>
5: var q;
6: function pageb()
7: {
8: q=5;
9: setTimeout("document.location.href='pageb'+q+'.htm' ", 1500);
10: }
11: </script>
12: </head>
13: <body bgcolor=yellow text=black onLoad="pageb()">
14: <h2> <center>Fourth page of series B</center></h2>
15: <h4>
16: <center>The life and times of President Carter.</center><p>
17: <center><img src="carter.gif" width=86 height=101><p></center>
18: In about 15 seconds you will see the fifth page of this series.
19: </h4>
20: </body>
21: </html>
1: <html>
2: <head>
3: <title>pageb5 </title>
4: <script language=javascript>
5: function pageb()
6: {
7: setTimeout("document.location.href='mainb.htm' ", 1500);
8: }
9: </script>
10: </head>
11: <body bgcolor=yellow text=black onLoad="pageb()">
12: <h2> <center>Fifth page of series B</center></h2>
13: <h4>
14: <center>The life and times of President Clinton.</center><p>
15: <center><img src="clinton.gif" width=86 height=101><p></center>
16: In about 15 seconds you will see the main page of this series.
17: </h4>
18: </body>
19: </html>
The next method produces a slide show with pages picked at random from a set of 5 pages. It may happen that the same page is called more than once in a row. Thats the result of the random selection. This slide show continues until the user exits the program. We show later how one of the pages, "pagec5.htm", can be modified to end the slide show.
The slide show is started by clicking on the link produced in line 20 of the program "mainc.htm". This calls the function "pagec()", lines 6-11. Line 8 generates an integer q, from 1 to 5 used in line 10 to load the page "pagec"+q+".htm" . For instance, if q=3, then the page "pagec3.htm" is loaded.
1: <html>
2: <head>
3: <title>mainc</title>
4: <script language=javascript>
5: var q;
6: function pagec()
7: {
8: q=Math.floor(Math.random()*5+1);
9:
10: document.location.href="pagec"+q+".htm";
11: }
12: </script>
13: </head>
14: <body bgcolor=yellow text=black>
15: <h3><center> Main Page - Random selection</center></h3>
16: <hr>
17: <h3><center>The Chess People</center></h3>
18: <h4>
19: Click the button below to start the automatic random scrolling of pages of series C. Pages will be chosen at random except if the fifth page appears then this main page will be accessed again and the process will stop.<p>
20: <a href="javascript:pagec()">Click for series C</a>
21: </h4>
22: </body>
23: </html>
1: <html>
1: <html>
1: <html>
1: <html>
1: <html>
The last page can easely be modified so that the next page loaded will be the main page, "mainc.htm", and thus end the slide show. To do so replace lines 5-11 by
function pagec()
{
setTimeout("document.location.href='mainc.htm' ", 1500);
}