Creating Back Buttons For You Page
Often you want to create a back button on your page, which the user can click on to go back to the
page they came from. However, in many cases, you don't know where the user came from to get to your
page. To deal with this problem, you will have to use the history list of the browser to go back to
the previous page.
Using An Image As A Back Button
First start with a "Back" button as shown below:
|
HTML: <img SRC="back.gif" BORDER=0 height=64 width=112>
|
Add A Link To The Image
You now want to add a link to the image, to take the user back to the previous page. As you don't
know the exact url of the page, just use a "#" to indicate the current page.
|
|
HTML: <a href="#"><img SRC="back.gif" border=0
height=64 width=112></a>
|
Taking Over The Default Action When The Viewer Clicks On The Link
When the viewer clicks on a click (i.e the image), you can cause some Javascipt code to be run, first
before the browser goes the the link address.
For example, this button will tell the viewer that it has been clicked.
|
|
HTML: <a href="#" onclick="alert('Button Clicked')"><img SRC="back.gif"</a>
|
Sending The Browser Back One Page
The following button tells the broswer to go back one item in the history list.
|
|
HTML: <a href="#" onclick="history.back()"><img SRC="back.gif"</a>
|
| Note: | This button does not appear to work. It is "working", the problem is that the href link to
"#" (i.e current page) is over-riding things and leaving you on the current page.
|
Cancelling The User's Click On The Link
What you have to do is tell the browser to ignore the "click" and not go to the specified link.
This is done by returning a "false" value on the onclick.
The "back" button below, has a link to the University's Home Page, but clicking on it will not take you there.
|
|
HTML: <a href="http://www.uwaterloo.ca" onclick="return false"><img SRC="back.gif"</a>
|
Combine the History and Returning False
By doing the history.back, followed by returning "false", you can get the button to work as desired.
|
|
|
HTML: | <a href="#" onclick="history.back();return false"><img SRC="back.gif"
BORDER=0 height=64 width=112></a>
|
|
Note: If this example doesn't seem to work. It might mean that in trying the previous buttons,
you actually have a history with this page in it a couple of times. If so leave this page, and then come back to it and
try the button again.
Using A Text Link As A Back Button
If you wish you can use a text link to go back to the previous page.
Just replace the image with the appropriate text as shown below:
Go Back To The Previous Page
Example HTML for above: <a href="#" onclick="history.back();return false">Go Back To The Previous Page</a>
Using A Form Button
If you want a button, but don't want to create a special image, you can use the standard form button as
a "back" button as shown below:
|
|
|
Example HTML for above:
|
<FORM>
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
</FORM>
|
|
Some addition options to the history object
To go forward a Page use:
history.forward()
|
To specify going back a given number of pages, such as 3 use:
history.go(-3)
|