topic title

Two distinct kinds of link are covered by the heading "buttons". In the first place this could cover something like this:

Click on the button to follow the link

Text-based menus
Image-based menus
Opening new windows
A form-based menu

There are many sites on the WWW which can offer you small "button" icons like this for free. All they usually ask is that you link back to them, so fulfilling my obligations, the button above was downloaded from http://www.freebuttons.com/. On sites like this you will find numbered buttons, themed buttons, flowery buttons, arrow buttons, square ones, psychedelic ones... just about anything that matches the theme of your page.

It's not entirely satisfactory though, is it? I left that menu above deliberately looking a little ragged to show you a couple of pitfalls here. First of all, that button looked pretty good against a dark background, but on the lighter background here it's got jagged edges. This is a graphic problem known as anti-aliasing, and comes about because it's not always easy to represent curves with the square "grid" of pixels. Solving this problem is beyond the scope of this module, but see the ACOM option Graphics on the PC for more information.

Also, it would have been slightly more pleasing if those buttons had been rollovers, like this:

Text-based menus

Note that you'll also need BORDER=0 in the <IMG> tags of buttons like this, for reasons that'd be obvious if you tried it without.

The final point is that it'd have been best of all if the text next to these buttons had also been turned into links:

Text-based menus

That didn't involve anything more strenuous than placing the closing </A> tag after the text, instead of directly after the <IMG> tag. It's clearer, and also caters for those who don't or can't download images. If you're going to do this sort of thing, do it like this.

Using buttons as links can also cover the use of form buttons, which we already know about. What we want to do is add an onClick event which causes the browser to load another page. Add the event as shown underneath to each button (only one button shown for clarity), and bingo, you've done it. These are actually more robust than image links, as you don't actually need to download an image to make them work; no need to worry about those browsing with images turned off, then. The main disadvantage is that, as you can see, it's quite hard to control the size of the buttons with any precision, and therefore to get a tidy-looking page.

<forM ACTION="">
    <input type="button" value="Text-based menu bars"
        onClick="window.self.location='subj_textbars.html'">
</forM>

Back to the top

Back to the menu for lesson 10