Back and Forward Links with JavaScript

<< Previous Link | Forward Link >>

These links work the same way as your browser's BACK and FORWARD history buttons. The downside to this method is that if the browser's BACK and FORWARD history folder is empty such as one might expect to see on your index page, these links won't function.

CSS CODE:

/**Put this inside your external style sheet file**/
/**Link Styles**/

a.history {
 text-decoration:none;
 font-weight:bold;
 color: #3399FF; /**change color if desired**/}

a:hover.history, a:active.history, a:focus.history {
 color:#FF0000; /**change colors if desired**/
 text-decoration:underline}

XHTML CODE:

<!--Begin History Links, put this code in your HTML document between the <body> tags-->
<p><a class="history" href="javascript: history.go(-1)">&lt;&lt; Previous Link</a>
| 
<a class="history" href="javascript: history.go(+1)">Forward Link &gt;&gt;</a></p>

With Form Buttons

<input type="button" value="Back" onClick="javascript: history.go(-1);" />
<input type="button" value="Forward" onClick="javascript: history.go(+1);" />

Help Feed the Kitty

Your support helps us continue these efforts.

Web : Graphics : Print : Media Specialists

Home | Links | Tools | Templates | Contact