Graphics as Hyperlinks

Now that you know how to insert graphics on your web page and how to create hyperlinks, let's put the two together to display graphics that act as hyperlinks. Some common uses for this are:

• Linking to the website's home page via a graphical heading or logo appearing at the top of each web page.
• Linking to the next page, previous page or the top of the current page via 'buttonized' navigational links at the bottom of each page.
• Linking to all the pages in a website via buttons in an index or menu.
• Linking to large full-sized graphics via thumbnail or miniaturized versions.

To display any graphic as a hyperlink, simply replace the link text which usually acts as the hyperlink content with an <img> tag (loaded with the appropriate attributes, of course).

For example, here's the source code to produce a link to the Iron Spider home page using the old Iron Spider logo:

Link Borders

So you don't want that colored border that appears around graphic links or, conversely, you want to make it bigger?

No problem!

First of all, by way of explanation, most web browsers by default will display a border around graphic links indicating the link status color. If you don't want this border to appear or you actually want to make it bigger, you can do so using the border attribute in your <img> tag. The value for the border attribute represents the link border width in pixels where the default is usually "2". To make the border disappear altogether, put a value of "0". To make the border bigger put any value bigger than 2 (or for a thin subtle border put a value of "1"). Examples:

Displaying Tool Tips

You should keep in mind however that the link border does actually serve a purpose and that is to indicate to the viewer that this image is indeed a link. In some instances, such as when the image is 'buttonized' (shaped like a button) it will be obvious the image is a link. In other instances, however, whether the image represents a link or not will be less obvious.

How to display graphics as links is largely a matter of taste but regardless of what style you choose, you will probably want to convey to viewers some kind of text to indicate where your graphic link leads to. Some web authors depend on the alt attribute in the <img> tag to pick up the slack on this task since setting the alternate text will also display a tool tip when the viewer hovers their mouse pointer over the graphic. However this is only reliable in Internet Explorer and older versions of Netscape. Moreover, the alt attribute is really intended to address accessibility issues or those who have set their browsers to not display graphics.

Instead of depending on the alt attribute to convey this information, it's much more reliable to also insert the title attribute in your <img> tag. This will display a little pop-up advisory text (more commonly known as a 'tool tip') when a mouse pointer hovers over the link graphic regardless of the browser that is being used. To illustrate, the following source code will display 'Go to Iron Spider home page' as a tool tip when the viewer hovers their mouse pointer over the Iron Spider logo link:




(Note that when using both the alt attribute and the title attribute in the <img> tag, the resulting tool tip displayed in Internet Explorer will be the value of the title attribute.)


Graphics are commonly used as 'dividers' which decoratively separate your web pages into sections. There is, however, a way to use HTML to display a simple but highly configurable graphic divider known as the horizontal rule...