Image Maps

Contents:

• Creating Map Files
• Using Map Files

Creating Map Files

Image Maps are images which have "hot spots," or areas on which readers can click and be taken to another URL. In order for a page to have an image map, it needs

1. a graphic to click on, and
2. a MAP element in the HTML

The MAP element defines where the "hot spots" are and their corresponding URLs.

This kind of image map is called a Client Side Image Map. Some software refers to it as a CSIM map. Only the most ancient of browsers cannot handle CSIMs. But, this being the District we know and love, the most ancient browsers could well be in our audience. That's why redundant text links are highly recommended.

Here's an example Client Side Map:

<MAP NAME="sections">
<AREA SHAPE="RECT" HREF="advanc10.htm" COORDS="0,0,10,15" ALT="HTML Tables">
<AREA SHAPE="CIRCLE" HREF="advanc20.htm" COORDS="20,15,12,15" ALT="HTML Forms">
<AREA SHAPE="POLY" HREF="advanc30.htm" COORDS="30,0,30,25,40,25,45,15,50,0" ALT="Special Character Entities">
<AREA SHAPE="RECT" NOHREF COORDS="0,0,55,30" ALT="">
</MAP>

The MAP element needs the NAME attribute; you need to name your MAP so you can link to it from your image. The only element allowed in a MAP element is the AREA element. The AREA element, like an IMG element, is an empty element, so it has no closing tag (</AREA>) and requires alternate text. Here are some features of the AREA element:

• The upper left-hand corner of the image is 0,0
• Coordinates are separated by commas
• You may use relative URLs
• There is an ALT attribute. Later versions of Lynx can utilize Client Side Image Maps; however, since Lynx users cannot see graphics while surfing, the ALT text gives a name to the link for them
• The AREA with NOHREF tells the browser what to do if someone clicks on a point on the graphic that isn't a hotspot. NOHREF is a rectangle, and the coordinates are the upper left corner of the graphic (0,0) and the lower right corner of the graphic. You want to put the AREA with NOHREF last in your MAP element. The first AREA matching the coordinates of the mouse click is used; this last AREA will always match a click that the other AREAs don't cover. If you put this first, every click, even those in hot spots, could be intercepted by NOHREF and the reader wouldn't go anywhere.

Return to the Top

---

Using Map Files

You can easily make image maps using AOL Press 2.0 -- here's how. AOL Press will do all of the steps below for you. Otherwise, there are other programs that can make image maps listed on the Graphics Applications page in the Tools Section.

So, now you have an HTML document, a graphic, and a MAP element containing several AREA elements. Here's how you put them together.

First, you add your IMG element to the document:
<P><IMG SRC="whatever.gif" ALT="Advanced Sections" BORDER="0" USEMAP="#sections"></P>

• You still add alternative text.
• BORDER="0" can be added to remove the border showing the image is a link
• You use the USEMAP attribute, along with a # and the name of the MAP, just like you do for Internal Links.

Then, somewhere on your page, you copy-n-paste the MAP element into your document. I usually put it between the last </P> and the </BODY> tags, so it's out of the way.

And that's about it. Remember to add text links to your page, as well, for those with old, old browsers.

Programs to Make Image Map Files Automagically

Previous: Counters