There are two “gotchas” associated with making an image clickable. If you look at the <img> tag above, you'll notice that we've put in a border="0" attribute. If you don't put it in, you'll see a colored border around your image, as you see at the right.

Take a close look at the clickable image at the right. You might, in an older browser, see a blue underscore at the lower right corner of the image.

This annoying little artifact occurs when people make files more readable by putting opening and closing tags on different lines, as shown below. The “new line” characters, which are normally invisble, are shown in red.

<a href="http://www.w3.org">
<img src="w3c_home.gif"
  alt="World Wide Web Consortium Home"
  width="72" height="46" border="0" />
</a>

Ordinarily, making files readable is a Good Thing. However, in this case, it backfires. HTML takes any run of blanks, TABs, or new lines and translates them into a single blank. The new lines inside the <img> tag don't cause any problem, because they're inside a tag. However, the new line just before the </a>, being outside the <img>, is translated into a single blank. That blank is still between the <a> and </a>, so it becomes highlighted and clickable, and shows up as a little blue underline.

This, then, is one place where we have to make readability take a back seat to good looks. Just put the closing </a> tag immediately after the ending angle bracket of the <img> tag. With no intervening blanks, tabs, or new lines, the little blue underline will go away.