HTML and CSS Reference
In-Depth Information
Figure 9.14 shows the result of this addition.
When you click the icons now, the browser jumps to the linked page just as it would
have if you had used text links.
.
Output
FIGURE 9.14
The basic page
with navigation
links.
9
Speaking of text, are the icons usable enough as they are? How about adding some text
describing exactly what's on the other side of each link? You can add this text inside or
outside the anchor, depending on whether you want the text to be a hot spot for the link,
too. Here, include it outside the link so that only the icon serves as the hot spot. You also
can align the bottoms of the text and the icons using the
align
attribute of the
<img>
tag.
Finally, because the extra text causes the icons to move onto two lines, arrange each one
on its own line instead:
Input
▼
<div>
<a href=”index.html”><img src=”Up.png” alt=”Up” /></a>
Up to index
</div>
<div>
<a href=”ready.html”><img src=”Left.png” alt=”Left” /></a>
On to “Gapping the New Plugs”
</div>
<div>
<a href=”replacing.html”><img src=”Right.png” alt=”Right” /></a>
Back to “When You Should Replace your Spark Plugs”
</div>
See Figure 9.15 for the final menu.
