Images Inside <a href>

Here's an example of an image used as a link by enclosing it inside <a href>.

<a href="javascript:void(0)">
  <img src="images/Pie.jpg" width="146" height="112"
       alt="This pie links to nowhere" />
</a>

Browsers normally don't display a border around an image, but when you put the image inside an <a href> tag they like to put a border around it like it has here. This is intended as a visual clue that the image is a link, just like underlined text indicates a link. But the borders tend to be ugly and are particularly irritating for an image like this one that is supposed to blend into the background. So you'll normally want to add border="0" to the image tag to get rid of the border.

<a href="javascript:void(0)">
  <img src="images/Pie.jpg" width="146" height="112"
       alt="This pie links to nowhere" border="0" />
</a>

Depending on the browser you're using, you may notice that there's a little "tail" beside the above images. This is just a little blue line at the lower right-hand side of the image. I'm seeing a tail on this page in Netscape 3, but not with Netscape 4.06 or IE 4, although I've seen tails in both of those browsers as well and had expected to see them here.

In case your browser doesn't show a tail, here's a screen shot of Netsacpe 3:

What causes a tail? Well, basically, poor browser implementation. The browser is including a blank between the > that ends the <img> tag and the </a>, and since this is a link, it underlines it. This is improper browser behavior, but some versions of both Netscape and IE do this at least part of the time and it's necessary to account for it. It's odd that both browsers put tails after the image like this, but none of them put tails BEFORE the image.

To fix the problem, eliminate all white space between the > of the <img> tag and the </a>. Here's a couple of ways you can do this:

<a href="javascript:void(0)">
  <img src="images/Pie.jpg" width="146" height="112"
       alt="This pie links to nowhere" border="0" /></a>

<a href="javascript:void(0)">
  <img src="images/Pie.jpg" width="146" height="112"
       alt="This pie links to nowhere" border="0"
 /></a>