Chapter 7, Lesson 1

If you already know how to include an image in a hyperlink, you can skip this lesson.

You know you've reached a new level in HTML-COOL when you've learned to build a "clickable" image. A clickable image is a link to another file or site. It acts just like a text link does, but is activated by clicking on the image rather than clicking on the link's description.

The procedure is really rather simple. You will recall that to build a simple image, you use the form:

<IMG SRC="image-filename">

And you'll also recall that the form for building a clickable text link is:

<A HREF="reference-filename/URL"> link-description </A>

Recall that with the text link, the link-description (which is located between the opening <A>and closing </A> anchor tags) gets highlighted by the browser. It is this highlighted text that you click to activate the link.

By substituting a simple image for the link-description, the image becomes the clickable description. Normally, the browser will highlight the image by surrounding it with a colored border, so that you can tell it's clickable.

Therefore, the complete format to implement a clickable image link is:

<A HREF="reference-filename/URL"> <IMG SRC="image-filename"> </A>

Naturally, all the attribute tags that you used to use for images can still be used inside the 'IMG' tag. In fact, it is still recommended that you use alternate text 'ALT', and 'HEIGHT' and 'WIDTH' attributes with the clickable image, just as you would with a simple inline image. Let's see it in action:

<A HREF="demopag3.htm"><IMG SRC="btn_demo.gif" 
ALT="click: demopage" WIDTH=79 HEIGHT=26></A>  <BR>
click the image to view our demo page.

click the image above to view our demo page.

What should we notice here? We've created a clickable "button" which is no more than a run-of-the-mill link with an image tag ( referencing image file "btn_demo.gif") inserted where the link-description would have been. Also, in keeping with good practice (though not required), we've specified the HEIGHT, WIDTH, and alternate text for the button image. Notice that we've used brackets inside the alternate text. The brackets are not part of the syntax, but they will show up on a text browser as part of the text, helping to set it off from the remainder of the text, or adjacent links.

While this example specified a local HTML file as the reference for the clickable link (namely, "demopag3.htm"), any valid, accessable filename could have been specified, as well as any valid URL, or any named-target on this or another page.

Now that you know how to build clickable images, you can rightfully claim use of the title "Web Page Hotdog", and are authorized to place the initials "WPH" after your name.

---

Overseer: Monty Northrup ... ... leave e-mail ...

---