Chapter 7, Lesson 3

If you already know how to add clickable captions to a clickable-image hyperlink , you can skip this lesson.

In a previous lesson, we learned that we could substitute a simple image for the link-description portion of a link construct, and end up with a clickable image. Well, if we want both a clickable image and a clickable caption, we can do that rather easily. You see, whatever shows up between the opening <A>and closing </A> anchor tags becomes the link description. In the lesson immediately preceding this one, the only thing between those tags was an 'IMG' tag (i.e., an image), therefore the only thing interpreted by the browser as a link-description was the image itself.

If, however, we place text before and/or after the image, but still between the opening <A>and closing </A> anchor tags, that text will also be "clickable" (just as it would have been without an image). This being true, we can now offer this format for building a clickable image with clickable caption:

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

Here, we've shown the caption text coming after the image, but it could as easily have been placed before the image, or both before and after

Naturally, we could have accomplished the same effect if we had placed two separate links (but consecutive) to the same reference, one with an image, and one with text-only as the link-descrition, in which case we would have used two links like so:

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

Let's check out some HTML source code:

<A HREF="demopag5.htm"><IMG SRC="btn_demo.gif" 
ALT="[click: demopage]" WIDTH=79 HEIGHT=26 ALIGN=MIDDLE> dumb demo page</A>
<P>
<A HREF="demopag5.htm"><IMG SRC="btn_demo.gif" 
ALT="[click: demopage]" WIDTH=79 HEIGHT=26 ALIGN=MIDDLE></A>
<A HREF="demopag5.htm"> dumb demo page</A>

dumb demo page

dumb demo page

Notice what we've done here. Both examples of the link to the same "dumb demo page" behave the same way, and look the same on screen. In both cases, you may click on either the image or the highlighted text to activate the link. But in the first example, we've built a single link, with both image and caption as the link-description. In the second example, we built two separate links, one with only the image as the link-description, and one with only the caption-text as a link-description.

Actually, if you look closely, you'll see there is a teensy-weensy difference in the behaviors of the two examples. In the first example, the "space" character between the image and the caption was "highlighted" (and underlined, usually) by the browser because it was between the opening <A>and closing </A> anchor tags. But in the second example, which used separate links for the clickable image and the clickable text, the "space" character occurred outside the anchor tag, and therefore didn't get highlighted (or underlined)

Also notice that, since text is involved here, we've specified an 'ALIGN' attribute in the image tag. This causes the any text on the same line as the image to be aligned to the "middle" of the image (because we specified "MIDDLE" as the attribute's value). Regardless of whether we implemented the caption text in one link or two, the text was aligned (as specified) with the image.

---

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

---