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.
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:
The syntax of the replace method is as follows:
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!"