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: ...

Get HTML and XHTML Step by Step now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.