CHEBUCTO CONNECTIONS TIPS FOR POWER USERS

Imagemaps on CCN

Welcome to the third Tips for Power Users. In this column, we'll talk about clickable Imagemaps and other advanced features of HTML (HyperText Markup Language), the language used in the WorldWideWeb.

Imagemaps

Clickable imagemaps can add flavour and ease-of-use to your Web pages, but just remember that users of Lynx (like your fellow CCN users) won't be able to navigate your homepage unless you provide a text-only alternative. I'll put some more Imagemap guidelines at the end of this section, but for now we'll work on creating your first clickable imagemap.

Step 1 - Creating the Gif

The first step is to create the graphical GIF-format file on which the human browser will click. Decide where you want to link to from this imagemap, and draw appropriate pictures for the links.

Step 2 - Creating the MAP file

The "map" file is the ASCII text format file that contains the coordinates of the polygons, rectangles and circles and the links that each shape on the gif will take you to. You could create this file manually, but then again you could also burn your computer. Neither activity is desirable, and trying the first will probably result in the second, so that's why there are graphical Imagemap editors. A Windows 3.1 application called MapEdit is available in the PDA (go pda), and I have heard tell of a freeware Windows 95 map editor called Map THIS!. There are probably Macintosh and Amiga editors, and if you find one that is shareware/freeware/public domain, please upload it to the PDA for the use of others.

If you are using MapEdit, select File|Open/Create. In the GIF Filename box, type the name of the gif that you just created (for the sake of argument, we'll call it "smap.gif"). In the MAP Filename box, type the name of the MAP file that you want to create (or open, if you are editing an existing MAP file). Click on the NCSA httpd radio-button, and click OK. For other editors, there should be some form of help documentation to walk you through the creation process.

Now you can begin to create rectangles, circles and polygons around parts of the GIF (which should be displayed at this point) and define the links that clicking on those areas will take you to. You can also define a "default" link, which will be chosen if the human browser clicks outside a defined area. When you have finished, save your MAP file.

Step 3 - Uploading Your MAP and GIF files

Now that you have your MAP and GIF files prepared on your home computer, you are ready to upload them to your public_html directory, or a subdirectory of public_html. They don't need to be in the same directory, but for the sake of convenience we'll put them in the public_html/smap directory.

Step 4 - Adding the Imagemap to your Web Page

Now you are ready to place the imagemap in an HTML file. If you were user aa529, and have created smap.gif and smap.map and placed them in the public_html/smap/ directory of your personal CCN diskspace, you might place a line like the following one into your public_html directory or one of its subdirectories:

And, lo and behold, there is such an smap.map, and you can get to the HTML file that references it by clicking on this very descriptive link. Of course, you'll need a graphical browser.

The most important step is the last one -- testing your imagemap. You may have to borrow someone's SLIP/PPP/direct account. If you find an error in the link, you can edit it in the .map file; just remember that in the Pico editor, long lines are split. You'll have to unsplit them before you save, or your imagemap won't work.

Imagemap Guidelines

When designing imagemaps, you should take into account a number of factors. Here are a few guidelines:

Make sure that the clickable "hotspots" on the gif are clearly marked and the destination indicated. Sorry, but pretty buttons labeled "Click me!" don't cut it.
Keep your gifs fairly short; large imagemaps take a long time to load, and gifs bigger than the screen are annoying in any case. Try to keep to 16 colours if you can; 256 colours can add a lot of unnecessary fluff (and overrun your quota).
Always design an attractive text-only version of your imagemap. If possible, put it in the same page as the imagemap.
Place subliminal messages in your imagemaps. It's fun.
Creating good imagemaps is an art, and one that is hard to master. You need a lot of artistic talent, which explains the notable absence of imagemaps in my own homepage. 8-)

In the Next Column

That took longer than I thought. In the next column we'll go over some of the newer features of HTML, including backgrounds and <shudder> tables.

CHEBUCTO CONNECTIONS HOME PAGE

Chebucto Connections TIPS FOR POWER USERS
is edited by Michael Smith
who is happy to receive Questions, Comments or Suggestions.
If your browser does not support mail, write to Michael later at aa529@ccn·cs·dal·ca.

Last Month: September 1995 Next Month: November 1995