Button Basics
Do more with your buttons! Make them refresh the page, go back/forward or close the active window. It's so simple! Just one line of code and you're done. Read more to find out how...
The Code(s)
In refreshing the page, this is the code you'll need:
<input type="button" value="Refresh" onclick="history.go()">
In going back to the previous page you visited, this is the code you'll need:
<input type="button" value="Back" onclick="history.go(-1)">
In going forward to the next page you visited, this is the code you'll need:
<input type="button" value="Forward" onclick="history.go(+1)">
In closing the page, this is the code you'll need:
<input type="button" value="Close" onclick="window.close()">
Just edit the underlined text to whatever you want to be displayed on your button. These are what the buttons will look like:
Check them out to see how they work! Be carful in pressing the Close button because this tutorial isn't over yet.
You can also increase the number of pages you want to go back or forward to. Just change the number in the respective code to how many pages you want to go back or forward to.
Other Options
Don't feel like using buttons? You may also use images. We'll just use a variation of the codes above. They're arranged in the same order as before:
<input type="image" src="refresh.gif" onclick="history.go()"> <input type="image" src="back.gif" onclick="history.go(-1)"> <input type="image" src="forward.gif" onclick="history.go(+1)"> <input type="image" src="close.gif" onclick="window.close()">
You can also specify the width, height and border of your images. Here's what they'll look like:
Also don't want images? Let's make them text links then! Still in the same order, here are the codes:
<a href="javascript:history.go()">Refresh</a> <a href="javascript:history.go(-1)">Back</a> <a href="javascript:history.go(+1)">Forward</a> <a href="javascript:window.close()">Close</a>
And this is how they'll look like:
Refresh | Back | Forward | Close
Again, change the underlined text to whatever file name or text you want.
Conclusion
I told you it was easy. The images I used for this tutorial were the icons on Internet Explorer that's why the're so familiar. This only works for browsers that have JavaScript enabled.
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.