HTML and CSS Reference
You can change the width of the border around the image by using the border attribute
to <img> or the border CSS property. Support for the border attribute has been dropped
from HTML5, so in this lesson, I use the CSS version. This attribute takes a number,
which is the width of the border in pixels. border=“0” hides the border entirely. You
were introduced to the various properties that make up the border CSS property in the
previous lesson. Disabling borders is ideal for image links that actually look like click-
able buttons, as shown in Figure 9.12.
Because the default behavior differs between browsers when it comes to borders around
linked images, you should always specify the border properties explicitly so that all users
experience your site in the same way.
Including borders around images that are links has really fallen
out of favor with most web designers. Not turning them off can
make your design look very dated.
Images that look
Task: Exercise 9.2: Using Navigation Icons
Now you can create a simple page that uses images as links. When you have a set of
related web pages, it's usually helpful to create a consistent navigation scheme that is
used on all the pages.
This example shows you how to create a set of icons that are used to navigate through a
linear set of pages. You have three icons in GIF format: one for forward, one for back,
and a third to enable the visitors to jump to the top-level contents page.
First, you write the HTML structure to support the icons. Here, the page itself isn't
important, so you can just include a shell page: