Using Images as Links

Images are good for more than just looks. You can use them to provide creative hyperlinks to other documents. HTML makes this easy because using an image as a link is exactly the same as using text. You are still using the anchor tag (the <a> tag you learned about in Lesson 4, "Linking Text and Documents") to surround the item you want to act as the hyperlink to another document. When you link from an image, the anchor tags must surround the image tag. Following is an example of the HTML you would use:

<a href="DOC2.htm"> <img src="/books/1/174/1/html/2/http://www.thingstobehappyabout.com/face2.gif"   alt="This looks just like me!"  height="60" width="60" /> </a>

When your visitors move their mouse pointers over the face image in this sample, they will see a pop-up that says, "This looks just like me!" When the visitors click on the image, they will open the DOC2.htm file referenced by the anchor tag.

Thumbnail Images

Another popular use of the hyperlinking capability of HTML is to link from one image to another. Why would you want to do that? Well, many times the image you want to display is so large that it takes longer to load into the browser than you think people would like to wait. If that's so, you can create a smaller version of the file, called a thumbnail, that will load more quickly into the browser. The visitor simply clicks the thumbnail if he wants to open the larger file. Here's how it's done.

<a href="large_image.jpg"> <img src="/books/1/174/1/html/2/thumbnail.jpg" alt="Click here to view a larger   image." height="60" width="60" /> </a>

As you can see, clicking the thumbnail.jpg image will open another image (large_image.jpg). The alt attribute in this sample tells the visitor how to open the larger image.

Tip

Many image editor programs provide tools to help you create thumbnail images of your large graphics. You can also use standalone products, such as Cerious Software's Thumbs Plus available for download at ftp://ftp.cerious.com/pub/cerious/thmpls32.exe.