HTML and CSS Reference
In-Depth Information
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.
9
NOTE
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.
FIGURE 9.12
Images that look
like buttons.
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:
