HTML and CSS Reference
In-Depth Information
Working with Linked Images and Image Maps
Inline images can be marked as hyperlinks using the same techniques you employed in
the last session. For example, a standard practice on the Web is to turn a Web site's logo
into a hyperlink pointing to the home page. This gives users quick access to the home
page rather than spending time searching for a link. To mark an inline image as a hyper-
link, you enclose the
<img>
tag within a set of
<a>
tags as follows:
<a href=”
reference
”><img src=”fi
fi le
” alt=”
text
” /></a>
Once the image has been marked as hypertext, clicking anywhere within the image
jumps the user to the linked fi le.
The target of the link need not be a Web page; it can also be another image fi le. This
is commonly done for
thumbnail images
that are small representations of larger image
fi les. Gerry has done this for his image of the photo of the month. The image on the site's
home page is a thumbnail of the larger photo. Gerry wants users to be able to view the
larger image fi le by clicking the thumbnail.
You'll turn the Photo of the Month image into a hyperlink pointing to the larger
image fi le.
Always include alternate
text for your linked images
to allow non-graphical
browsers to display a
text link in place of the
linked image.
To link the Photo of the Month image:
◗
1.
Return to the
home.htm
file in your text editor.
◗
2.
Scroll down to the
img
element for the Photo of the Month and then enclose the
inline image within a set of <a> tags as follows (see Figure 2-29):
<a href=”rainbow_lg.png”>
<img src=”rainbow.png” alt=”Photo” />
</a>
Figure 2-29
Linking an inline image
link to a large
image of the photo
◗
3.
Save your changes to the file.
◗
4.
Reload the
home.htm
file in your Web browser. Click the Photo of the Month
image and verify that the browser displays a larger, more detailed version of
the image.
