Graphics as Hyperlinks
<a href="valid web address">
<img src="graphic file name">
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
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:
Example 1A - SOURCE CODE
Example 1B - RESULT
So you don't want that colored border that appears around graphic links or, conversely, you want to make it bigger?
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
attribute in your
tag. The value for the
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:
Example 2A - SOURCE CODE
<img src="irnspd97.jpg" border="0"></a>
Example 2B - RESULT (no border)
Example 3A - SOURCE CODE
<img src="irnspd97.jpg" border="5"></a>
Example 3B - RESULT (5 pixel border width)
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
attribute in the
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
attribute is really intended to address accessibility issues or those who have set their browsers to not display graphics.
Instead of depending on the
attribute to convey this information, it's much more reliable to also insert the
attribute in your
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:
Example 4A - SOURCE CODE
<img src="irnspd97.jpg" title="Go to Iron Spider home page">
Example 4B - RESULT (graphic link with tool tip)
(Note that when using both the
attribute and the
attribute in the
tag, the resulting tool tip displayed in Internet Explorer will be the value of the
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...