HTML and Code design insider tricks

Navigation back and forwards form a web page without using the browser buttons

 

Image used

   BackButton.gif

   FwdButton.gif

 

See-How its done

Create a table and set the background to an appropriate image (in the case of this example a Button).  Simply set-up a standard Hyperlink over it.  The effect is like a changing image but many times faster and a lot quicker to create.  Especially useful when putting together a prototype or a fast graphical Web-Site.

Note: style="text-decoration: none"   gets rid of the underline from the hyperlink (which gives the trick away).

 

STANDARD DEFAULT BUTTONS

HTML CODE - BUTTONS (Back)

<INPUT TYPE="button" VALUE="Previous Page" onClick= "javascript:history.back(1)">
see-example

 

HTML CODE - BUTTONS (Forward)

<INPUT TYPE="button" VALUE="Next Page" onClick= "javascript:history.forward(1)">
see-example

 

IMAGE BUTTONS

HTML CODE - BUTTONS (Back) with graphic

<A HREF = "javascript:history.back()"><img src = "backbutton.gif" border = "0"></A>
see-example

 

HTML CODE - BUTTONS (Forward) with graphic

<A HREF = "javascript:history.forward()"><img src = "fwdbutton.gif" border = "0"></A>
see-example

 

TEXT LINKS

HTML CODE - TEXT LINKS

<A HREF = "javascript:history.back()">Back</A>
see-example
Back

 

HTML CODE - TEXT LINKS

<A HREF = "javascript:history.forward()">Forward</A>
see-example
Forward