Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Installation

13. Site Tour

Introduction

Links

Thompp's Javascripts Index
Thompp nation Home Page

Use this script to set up a tour for your web site. To add new pages to your tour, just add news rows into the array at the start of the script, specifying the page name, a short description and its address.

Your users can then move forwards and backwards through the tour, and link to any page in the tour.

Click below to see a tour demo of the Thompp Nation site..

Tour Demonstration

Pre-requisites

there are no pre-requisites for this tutorial

Installation

create a folder called "cards" and unload the card graphics zip file into this directory
Update your html page - add the following code as indicated:

1/4. Add the following code to the <head> part of the page: =========================================================== <Script Language="JavaScript"> mpages=new Array(); icurr=0; // Add pages below - each line is "page title" / "description" / "url address" mpages[0]=new Array("Home Page", "This is the Thompp Nation site home page", "home.html" ) mpages[1]=new Array("Site Index", "This page gives an index of all the main pages of the site", "sitemap.html" ) mpages[2]=new Array("Search Page", "Use this page to search Thompp nation site, and to search the web", "search.html" ) mpages[3]=new Array("Guestbook", "Read Thompp's guestbook, and add your own messages", "gstbook.html" ) mpages[4]=new Array("Message Forum", "Read the messages on the bulletin board, replay and create new threads", "forum.html" ) function showprev() { if (icurr < 1) { alert("You are already at the start of the tour"); return; } icurr--; showpage(); } function shownext() { if (icurr == mpages.length-1) { alert("You are at the end of the tour"); return; } icurr++; showpage(); } function showpage(){ // show current page showme.innerHTML='<iframe width=100% height=100% id="frame1" src="' + mpages[icurr][2] + '"></iframe>'; // show current page description mstr = " [" + (icurr+1) + "/" + mpages.length + "] "; astr = "<a href='" + mpages[icurr][2] + "'>" currtext.innerHTML = "<b>"+astr+mpages[icurr][0]+mstr+"</a>"+"</b><br><small>"+mpages[icurr][1]; // show previous page title if (icurr == 0) { prevtext.innerHTML = "Start of Tour"; } else { prevtext.innerHTML = mpages[icurr-1][0]; } // show next page title if (icurr == mpages.length - 1) { nexttext.innerHTML = "End of Tour"; } else { nexttext.innerHTML = mpages[icurr+1][0]; } } </Script> 2/4. add the onload keyword to the <body> tag as follows: ========================================================= <body onLoad="showpage()";"> 3/4. then insert the following html into the body of the html page for the navigation links: ============================================================================================ <table width=100%> <tr><td width=20%> <td width=60%> <table width=100% border=1> <tr><td width=33% align="center" valign="top"> <small><small> <a href="javascript:showprev()"><< Prev</a><br> <span id="prevtext"></span> <td width=33% align="center" valign="top"> <small> <span id="currtext"></span> <td width=33% align="center" valign="top"> <small><small> <a href="javascript:shownext()">Next >></a><br> <span id="nexttext"></span> </table> <td width=20%> </table> 4/4. then insert the following html into the body of the html page for the current page: ======================================================================================== <Span Id="showme" style="position:relative;top:10px;left:10px;padding:5px 5px 10px 10px;font-family:Arial;font-size:10pt;width:95%;overflow:auto;height:500px"> </Span>

Page last updated 27th January 2002