Lesson 7:  More on Clickable Images

Even Better Formatting:
Headers, Centering, Bold & Italic

In our pre-lesson conversations with Jeri, it's clear that this is now getting to be some fun.

In this episode, Jeri learns more about how clickable images' maps work, and also picks up some more formatting techniques to make her pages look even better.

After class, we discuss clickable image mapping software, and worrying about copyrights.

Contents of Lesson 7

Pause & Reflect:  More on Clickable Images


>>how did you tell the little "hand" to do that on a specific area of the picture????<<

Now that you've installed a clickable image, and known the joy and hopping up & down of such a magical thing, we will pick apart the commands.

In our last session, we added the USEMAP parameter to the image command, like so:

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

The USEMAP parmeter tells Netscape that we're going to be supplying some coordinates, using the MAP command. And we did, in fact do that. We followed the image command with the following code:

<map name="TREEHOPE">
<area shape="rect" coords="4,192,29,231" href="#poem">
<area shape="circle" coords="60,163,12" href="#deer">
<area shape="default" nohref>

As you can see, like almost every other HTML command, the MAP command has a start and an end:
<MAP...> .... </MAP>

The start-map command has one parameter: NAME. In this case, we named the map the same thing as our image (only in caps).

Between the start-map and end-map commands, we use the AREA command to give it some coordinates, corresponding to physical places in the picture, and say where we want the cursor to jump, if someone clicks on that place.  These coordinates are just like on a geographical map that has latitudes and longitudes.  With an image, these locations are expressed in pixels.

Pixels are the little dots of colored light that cover the monitor's screen, in order to display text and images back to you. People can change their computers to all sorts of different resolutions, but a very common resolution is to have 640 pixels across, and 480 pixels down, for a single screen.

In your page, you expressed the coordinates to your browser by means of the AREA command. Note that AREA is a command that does NOT have and end. I.e., there is no such thing as </AREA>.

The AREA command has 3 parameters:

  • The shape of the "hotspot" (clickable spot)
  • The coordinates that we discussed above
  • And the link (HREF) where we want to go if someone clicks on that place.

Let's take our first AREA command as an example:

<area shape="rect" coords="4,192,29,231" href="#poem">

In this case, the SHAPE is "rect", which does not indicate an alternative way of taking one's temperature, but in fact indicates a "rectangle". SHAPE is specified in order to help the browser interpret the subsequent coordinates. You can also make areas that are circles and polygons.

The COORDS parameter gives the actual pixel location and boundaries of the part that we want to make clickable. For a rectangle, we provide the pixel-address of the upper-left corner and the pixel-address of the lower-right corner.

<area shape="rect" coords="4,192,29,231" href="#poem">

So, in our sample line, for the poem's hot-spot, we are saying: If someone clicks anywhere from the 4th pixel in to the 29th pixel in, anywhere from 192 pixels down to 231 pixels down, then they are in this hot-spot. In the case of a circle SHAPE, the pixels express the circle's center, and measure the radius in pixels. Trying to describe the coordinates of a polygon makes me want to go to the Old People's Bar, so I will omit explaining the polygon.

The third parameter of the AREA command is the HREF. The HREF is just exactly like the ones we've seen in the anchor command. Like an anchor command, it can point to somewhere within the page, or some other page, or some completely external site.

<area shape="rect" coords="4,192,29,231" href="#poem" >

In the poem's hot-spot, we said, HREF="#poem". Remember from last time, the # is a signal to the brower that we're talking about somewhere WITHIN a page, rather than a whole page. If we say HREF="#poem", then there has to be a place named "poem", just like in our anchor examples.

If we had wanted to go to a completely different page, for example the home page, we would say HREF="index.htm".

We already had an "address" for the poem, from our previous lesson where we jumped from clickable text. At the start of the poem, we had added an anchor like so:

<A NAME="poem">Here is the poem</A>

This provided us in advance with the label we needed for the image's hot-spot to go to.

I see that you've already found out that the hotspot around the deer doesn't work -- i.e., doesn't go anywhere. That's because we don't have a label, like the one above, for "deer".

>>I'll start looking for a good picture of Big Rack<<
When that is ready, we can fill in the anchor label for "deer", and the deer's hot-spot will become operable. If you like, you can write some text about him, and that can be the link until a good picture is found.

And now, on to today's lesson.

Lesson 7:  Even Better Formatting:
Headers, Centering, Bold & Italic

>>Oh, the spacing came out beautiful on the poem also<<

Cool! We can also mess with fonts. There are many complicated font commands, for size, color, bolding, etc. But we'll begin with the header commands.

Formatting Via Header Commands

Headers, you will be astounded to discover, have a start and an end. Headers come in many levels. Typically, we usually use only from H1 to H3 levels. Personally, I use H3 and really nothing else. HTML headers are a hard concept for programmers, because we naturally think they have some logical value. But they do not, they are strictly visual, and do nothing more than affect the size of the text.

At the start of George's poem, you have a line that says:

<P><A NAME="poem">Here is the poem</A>

Right before that line, add a line that says:

<H1>A Poem for the Tree of Hope</H1>

Save and view via Netscape.

Now, add a line right below the H1 line that says:

<H2>Christmas in Heaven</H2>

Save and view via Netscape. See the difference? Now, add a line right below the H2 line that says:

<H3>Submitted by George Sherman</H3>

More difference. Now that you can see how it works, lets get rid of the H2 and H3 lines, and just keep the H1. Change the H1 down to an H3 to make it a more normal size.

Now we have a problem -- when we click to go to the poem, we skip the nice header. So let's move the NAME anchor away from the first line of text, and up into the header:

<A NAME="poem><H3>A Poem for the Tree of Hope</H3></A>

[Remember to remove the old anchor from the paragraph that follows that one.]

Alignment: Centering

A parameter you can use in a header is ALIGN, for alignment. Let's try a center alignment with the header:

<H3 ALIGN=CENTER>A Poem for the Tree of Hope</H3>

Save and view. See how it centers the header line? There are several ways to center. The paragraph command, for example, has alignment, and you can center a whole paragraph by saying <P ALIGN=CENTER> instead of <P>.

You also can center whole chunks of stuff by using the CENTER command. The CENTER command has a start and an end.

Let's try it out. Right before the title of the poem, right after ...Cancer Forum </P>, add the command:


Next, right before the paragraph inviting people to return to your home page, add the command:


Save and view. Nice, yes?

Bolding & Italics

Let's continue getting fancy and add bolding. Bolding has a start and an end. Surround the words Compuserve Cancer Forum, in the poem's intro, with a start-bold and end-bold like so:

<STRONG>Compuserve Cancer Forum</STRONG>

See how that works? If you like, you can try removing the end-bold and see what happens, and then put it back in.

[Note: Many people like to use <B> and </B> for bolding, but this command is not supported by all browsers -- I would stick to <STRONG>.]

And last, let's try italics. Go down to the poem and surround the title with start-italics and end-italics like so:

<EM>Christmas in Heaven</EM>

Save and view -- even nicer!

[Some people like to use <I> and </I>, but, like <B>, this is not supported by all browsers -- I would stay with <EM> (which stands for "emphasize", by the way).]

Now add bolding to the same title line, and it looks even nicer:

<STRONG><EM>Christmas in Heaven</EM></STRONG>

Phew! That's quite a lot for one day! Let me know when you've played around with these enhancements a bit, and we'll resume our lessons.

Love & hugs,

View the Pages after This Lesson

View the HTML code for the tree page after this lesson

Pause and Reflect, Lesson 7:
Clickable Image Map Software
& A Word about Copyrights

Clickable Image Map Software

>>You did a beautiful job of explaining how it all works with the little hand and the objects. Whether I'll ever be able to do it, well that's a totally different story (gg).<<

The nice part, now that I've put you thru all that kaka about coordinates, is that you don't have to do this. There are many software offerings out there that will do it for you.

My favorite is MapEdit, by Bouttell. It is downloadable from their site, at:
It is shareware, you can test it for 30 days before you buy it. It's also very inexpensive, and does a great job. You simply open the image, select areas of it, and the software asks you where you want to go for each selection. It creates a map for you, and creates the HTML code you need for the coordinates. All you need to do at that point is cut and paste them into your code.

A Word about Copyrights

>>I also need to get a note off to George and find out the author of the prayer, if not him, I sure don't want to run into any "copyright" problems correct????<<

You betcha!!!!!!!!!!!!!!!!

You and I are blessed in that we have scanners and can create much of our own, original artwork. But even so, I steal a great deal from the many free sites on the net. Always, always, always, check what their policy is about usage of graphics. And, even when they don't require it, I always give credit. Moreover, just out of courtesy, I always give them a plug by providing a link to their site.

The least tedious method I've found for keeping track is that when I find something I like, I open up NotePad at the same time. When you click the right mouse bottom to download the image, you will also see a "copy link location" in the drop-down menu. After saving the element, I do that, and paste the image's address into the NotePad I have open. I also copy/paste the location of the site itself, from the location line at the top (highlight the URL, then hit control/c), and paste that. For my own interest, I also add the date. And, finally, I type the descriptive name of the sit. Then I save the NotePad text into the same directory as I saved the image, with the same name as the image.

So, if I save an image called yhart01.gif, I will also create a file called yhart01.txt, which would look like so:

Donald A. Coggan, Ingénieur-Engineer
FREE Business Clipart & Photos
line of white hearts outlined in red.

This is really convenient later, when I'm ready to use the graphics. I can just cut/paste the URL for the link, and I have all the info I need. It's also helpful, when I don't want to take the time to load an image, to remind myself of what this thingee is, since it's so easy & fast to just double-click & read the text.

But the most important part is to cover your nether parts. I'm never sure whether the people offering free graphics actually have the rights to those graphics. This way, if a dispute were ever to occur (wildly unlikely), you have a record of where you got this thing, and can prove you had an honest belief regarding the source.

For written works, such as George's poem, an AltaVista search can often help. When I wanted to use that Makah tribe poem on my Life & Death page, that's what I did, I searched for a line from the poem. It showed up on a surprising number of sites. Several of them were professors of one thing and another, and I ultimately found out it was an anonymous work with no copyright. In most cases, quotes are not troublesome, when it's obvious you're not trying to steal the person's work outright, or most especially that you're not doing it for any personal gain. But I like to dot the i's and cross the t's as much as I can.

Conversations with Jeri
Prologue to Next Lesson
Next Lesson