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>
Images and Links
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.
 
 
Search WWH ::




Custom Search