HTML and CSS Reference
In-Depth Information
<img src=“eggplant.gif” alt=“Eggplant” style=”float: left; padding: 50px”
/>
<p>
This is an eggplant. We intend to stay a good ways away from
it, because we really don't like eggplant very much.
</p>
Can an image serve as a link? Sure it can! If you include an
<img>
tag inside a link tag
(
<a>
), that image serves as a link itself:
<a href=“index.html”><img src=“uparrow.gif” alt=“Up” /></a>
If you include both an image and text in the link tag, they become links to the same
page:
<a href=“index.html”><img src=“uparrow.gif” alt=“Up” />
Up to Index
</a>
TIP
One thing to look out for when you're placing images within links,
with or without text, is whitespace between the
</a>
tag and the
<img>
tag or between the text and the image. Some browsers turn
the whitespace into a link, and you get an odd “tail” on your
images. To avoid this unsightly problem, don't leave spaces or line
feeds between your
<img>
tags and
</a>
tags.
Some browsers put a border around images that are used as links by default, but not all
of them. Figure 9.11 shows an example of this. The butterfly image is a not wrapped in a
link, so it doesn't have a border around it. The up arrow, which takes the visitor back to
the home page, has a border around it because it's a link.
FIGURE 9.11
Images used as
links sometimes
have a border
around them.