Making an Image Clickable

Ever wonder how people can make images like the one at the right active as links? (If you click the image, you'll go to the home page of the World Wide Web Consortium.) World Wide Web Consortium Home

Actually, it's trivial. Anything between an opening <a> tag and closing </a> tag becomes active. Just put your <img> tag between the <a> and </a>, and it will become active too. Here's the code for the image above:

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

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.

World Wide Web Consortium Home

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">newline character
<img src="w3c_home.gif"newline character
  alt="World Wide Web Consortium Home"newline character
  width="72" height="46" border="0" />newline character
</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.

World Wide Web Consortium Home
 << Common Mistakes Index Links Among Pages >>