Techniques for creating inter-page slideshows
You've undoubtedly seen webpages on the net that change to another after a few seconds. Many times, these pages are used to redirect surfers to a new page on another domain. An inter-page slideshow is basically a series of pages that all change after some time. The slideshow cycles through each page, with a set interval in between each cycle. Think of it as an online presentation. In this tutorial, we'll discuss three techniques available in creating a mechanism that powers such a slideshow.
Let's start sliding, shall we?
Using meta tags of
HTML to create a slideshow
Meta tags are simply special HTML tags used to instruct the server what to do with a HTML document as it sends the document to the browser. Variations of these tags are commonly used to help search engines index the document, inform the browser when a document has expired (and get a fresh copy from the server), specify to speech synthesizers how to interpret the the text in the document (English, Chinese etc), and so on.
In this section, we will be looking at a variation of the meta tag that informs the browser when to jump to another html document. This will create a document that will automatically change after a specified time. A inter-page slideshow is simply a series of html documents each containing this kind of meta tag.
Lets see exactly how such a tag looks like:
<head> <META HTTP-EQUIV="refresh" CONTENT="3;URL=page2.htm"> </head>
As you can see, the meta tag is nested inside the <head> tag. The "3" above specifies the delay in seconds before the page changes, and "page2.htm" specifies which url to change to. The url does not have to be a complete URL (as seen above), ie: "http://www.yoursite.page2.htm", provided that the original and the targeted pages are within the same directory. Lets see a simple example of a page that changes to another after 3 seconds:
In this example, only the first page contains the meta tag. To create a slideshow, simply add the meta tag to each page.
Using the location
property of JavaScript to create a slideshow
Another identical method of creating a slide show is to use the location property of JavaScript in place of the meta tag. The location property takes in a url, and changes the current document in the browser to that url. By using this property, along with the prebuilt setTimeout() method to control when a url should change, we can duplicate the exact same function of the meta tag seen earlier:
<head>
<script type="text/javascript">
setTimeout("window.location='page2.htm'",3000)
</script>
</head>
Using the replace
method of JavaScript to create a slideshow
Regardless of which of the two techniques above you choose to use, they all have one fundamental "flaw". To demonstrate this flaw, click the below to see the slideshow again:
Just out of curiosity, what did you do to get back from the slideshow to the current page? By pressing the "back" button in your browser three times, I assume. That's a little hassling, wouldn't you say? What if I had a slideshow that consisted of 200 pages. Getting back from the slideshow then would be like getting back from Fitness World. Furthermore, if the interval between each slide in the slideshow is very short (1/2 seconds, for example), you may not even be able to get back. Every time you press the "back" button, the slideshow immediately takes you forward again. All this may or may not be ok, depending on the situation. There is an alternative to creating a slideshow that does not have this potential problem, and that is by using the replace method of the location object (the same location object used in the second technique) of JavaScript. The replace method allows us to replace the current document with the specified one, throwing out the current one from the history list in your browser (and thus removing it from the list of urls the Back button uses to navigate backwards).
The syntax of the replace method is as follows:
<script type="text/javascript">
//replaces the current document with "page2.htm"
window.location.replace("page2.htm")
</script>
The above code, when executed, replaces the current document with page2.htm, and throws the current document out of the history list.
Ok, lets now use this property to create a "better" slideshow. The below code, when inserted in multiple documents, does just that:
<head>
<script>
setTimeout("window.location.replace('page2.htm')" ,3000)
</script>
</head>
Take note how you got back from the slideshow-" with just one click of the mouse!"
