HTML and XHTML Step by Step

Hyperlinking from Graphics

In Chapter 5, you learned how to create text hyperlinks by using the <a> tag. Recall that you place the URL in the opening <a> tag, and then you place the hyperlink text between the <a> and </a> tags. You create a graphical hyperlink in much the same way, by placing an <img> tag in an <a> tag like this:

<a href="http://www.contoso.com" title="Home page">
<img src="images/leaf.gif" style="float: left; margin: 5px" />
</a>

The graphic appears as usual in the document, but when the user moves the mouse pointer over it, the pointer changes to a hand to indicate that the graphic is a hyperlink. By default, hyperlinked graphics have a border that is the same color as hyperlinked text.

You can remove the border by adding border: ...