Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

214 LESSON 9: Using Images on Your Web Pages

Output ▼

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 URL:

<a href="index.html"><img src="uparrow.gif" alt="Up">Up to Index</a>

FIGURE 9.10

The upper example

doesn’t have

image spacing, and

the lower example

does.

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.

TIP

Some browsers add a border around images that appear when the image is linked. You

can control the border around an image using the border CSS property. To remove the

border, just use the style attribute:

<a href="index.html"><img src="uparrow.gif" alt="Up" style="border: none;"></a>