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.
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.
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.
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.
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.
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:
<a href="http://www.ccn·cs·dal·ca/cgi-bin/imagemap/~aa529/smap/smap.map">< ;img src="http://www.ccn·cs·dal·ca/~aa529/smap/smap.gif" ISMAP></a>
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.
When designing imagemaps, you should take into account a number of factors. Here are a few guidelines:
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.
Last Month: September 1995 Next Month: November 1995