Creating Image Links

In today's earlier sessions, you learned how to place inline images and hypertext links in your page, but you haven't learned yet how to turn an inline image into a hypertext link (an "image link"). To create an image link, you just need to nest an IMG element inside of a hypertext link (an A element). To see how this works, nest the left-floating image inside of a hypertext link (see Figure 4.10):

<p><a href="dummy.html"><img src="safety.gif" hspace="10"
align="left" width="225" height="150" alt="Safety
First"></a>To further reduce the risk of infection from
Salmonella from eggs, you can cook your eggs until the whites
are no longer runny, which should kill any Salmonella
microorganisms that are present.

Figure 4.10: An image link is surrounded by a border, indicating it is a link.

As you will notice in Figure 4.10, an image link is surrounded by a border (generally blue, if an unvisited link, or purple, if a visited link) that indicates that it is a link.

Click on the image link to test it out. A dummy page, dummy.html, should be opened in the browser. Click the Back button to return to the tutor3.html example file.

Controlling the Image Link Border

You can use the IMG element's BORDER attribute to control the appearance of the image border. Increase the image link border to 10 pixels (see Figure 4.11):

<p><a href="dummy.html"><img src="safety.gif" border="10"
hspace="10" align="left" width="225" height="150" alt="Safety
First"></a>To further reduce the risk of infection from
Salmonella from eggs, you can cook your eggs until the whites
are no longer runny, which should kill any Salmonella
microorganisms that are present.

Figure 4.11: The image link border is increased to 10 pixels.

You can also turn off the image link border by setting the BORDER attribute to zero (see Figure 4.12):

<p><a href="dummy.html"><img src="safety.gif" border="0"
hspace="10" align="left" width="225" height="150" alt="Safety
First"></a>To further reduce the risk of infection from
Salmonella from eggs, you can cook your eggs until the whites
are no longer runny, which should kill any Salmonella
microorganisms that are present.

Figure 4.12: The image link border is turned off by setting its size to zero.

You should think before turning off the display of an image link's border, since it is the only sign that the image is also a link, other than the display of the image link URL in the status bar when you pass the mouse over the image link. Current browsers also will display alternative text (specified by the ALT attribute) when the mouse is passed over an image link, although many older browsers will not. Displaying an image link's border makes it immediately evident to a visitor that the image is a link, making it easier to navigate to and display the object of the link. However, where the function of an image as a link is self-evident, you can safely turn off the image link border. Examples of this are a navigational icon (an image of a house linking to your home page, for instance) and button links (with labels that convey their function).