Using Images As Links

You can use an image as a link to another HTML file or to another image. This also lets you include a small image as a link to a much larger image, a great advantage as the download and processing time for the "postage stamp" image is mush less than for the full image.

It also lets you use small images as navigation icons, such as a left-pointing arrow for Go back, etc. This is very useful for good Web site design. We'll look at that, in another section of this course.

To include a smaller image as a link to a larger one, or to link an image to another file, treat the image tag as the link text, like this:

<A HREF="directory_path/image_filename">

<IMG ALIGN=TOP SRC="directory_path/filename"></A>

You can include both an image and some text as a link to another document. Just add the text you want after the image tag. You may put text formatting tags, such as Bold, Italic, or even various levels of heading, inside the link text, like this:

<A HREF="directory_path/image_filename">

<IMG ALIGN=TOP SRC="directory_path/filename">

<H3>You can tag link text as a heading</H3>

</A>

This is useful if you want to make a logo plus a heading into clickable text to link to some home page. The reader can click anywhere in the logo headline -- a nice big target for them.

Back to Images, Sounds and Movies
Up to The Hypertext Markup Language (HTML)
Up to the Contents page