2006-07-06: turning an image into a link to another page is very simple, and the following HTML does the trick:
<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png">
</a>
However, you will note that a blue border appears around the image. This border is meant to inform users that the image is a link. Of course, there is something to be said for knowing what is a link, and what isn't.
Today, though, most web designers make it perfectly obvious through the design of their banners and navigation buttons that they are links to be clicked on. So how do we turn off the blue border?
The Right Way: XHTML Compliance And CSS
Modern browsers support CSS and the XHTML standard, and many designers are required to create pages that comply with XHTML. For those who need to create XHTML-compliant pages,CSS is the only way to go. The only drawback is that Netscape 4.x will still display a blue border. Of course, well below 1% of users are still using Netscape 4.x, and that number shrinks every day.
Here's a quick-and-dirty example with inline styles:
<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png" style="border-style: none"/>
</a>
An even cleaner solution, if you never want the blue border, is to say so in a style sheet:
img
{ border-style: none;
}
And then reference that style sheet in the head element of your page:
<link href="/mystylesheet.css" rel="stylesheet" type="text/css"/>
This method will automatically remove the blue border from all linked images in any page that uses that .css file.
I could turn off the borders only for links, and not for images in general, by separately styling each of
a:link img,
a:vlink img and
a:alink img. But that usually isn't necessary.
If we decided we really did want a border for one of our images, how would we do it? The usual way: by adding a border style to that particular image or CSS class of images, with inline styles or in the style sheet. And that would override what we've done here, for that particular image or class of images. So there's no need to be subtle.
The Old Way That Always Works
There is a simple and effective method that works with every browser, including ancient versions of Netscape 4.x. However, it won't pass a strict XHTML validator, so don't say I didn't warn you. Here it is:
<a href="http://www.boutell.com/">
<img src="/boutellcomlogo.png" border="0">
</a>