Lesson 6:  Introduction to Clickable Images

In this episode, Jeri refines her formatting with the break command, and gets an introduction to clickable images.

Pause and Reflect, More on Formatting:
Using the BREAK Command for Better Formatting

3/28

Excellent, perfect question.

You now know that <P> isn't entirely satisfactory for all spacing situations. If you write a paragraph as:

, then it gets all mooshed like so:

Yet, if you put <P> after each line, it causes TOO MUCH spacing, putting an extra line between each line of the poem. You're right, there IS a funny little HTML command that will take care of this. It's called the break command. Like the image command, it is one of those rare ones that doesn't need an end. So, where there is a <B>, there is no </B>. A break causes a carriage-return (new line) without adding an extra space, and without ending the characteristics of the paragraph (centering, etc.).

So, we can code this paragraph as follows:

, and it will now format out correctly. Add the <BR>s where necessary, and now see how good it looks.

>>we can make the Miracle Deer a clickable too although I'd have to do a separate JPG for him right??<<
Absolutely! We could either have the click go to a text explanation, or to a larger picture of him, either way.

For today's lesson, here's a little something that will get you so stoked....

Tree page:
Right now, our image statement for the tree looks like so:

Add a use-map parameter to the statement so it looks as follows. We'll name our map the same as our tree, but in capitals -- 'TREEHOPE". Since it's a "go-to label", as we discussed in the anchor lesson, we'll put a # in front when used as a reference. So, the image statement should now look like this:

<IMG SRC="treehope.jpg" BORDER=5 USEMAP="#TREEHOPE">

Now, cut and paste the following map command right after the image statement. You don't have to understand any of this, there's software that will do it for you, that we can discuss as we go along. And we'll learn more about this later.  But for now, the code to add is:

When you've added the above code, save and view thru Netscape. When you slide the cursor over the part of the picture that has the signpost, watch what happens. Click it and watch what happens.

Love & hugs,
   Lehua