How To Do Maps

by Mark S. Hutchenreuther

A number of home pages are offering both a map and a menu to link to other parts of the home page or to other appropriate pages. If you decide that you want to do a map, here is how to do it. Please note that this is how we do maps at RAIN. This is slightly different than how they do a map at Microsoft. The best advice I can give you is to look for other maps on other pages on your Web server. See how they did it, then do yours similarly. If you are the first to do a map on your server, here is how to do it.

Step 1

Do your menu first. If a person accesses your home page with a text browser with no graphics capability, they will not be able to use your nifty map. They will have to use your menu instead. Also, if you do your menu first, you will know how many entities you will need to have on your map. An entity is some uniquely identified area on your map. It may be a word, a picture, or merely an area. Although the entity can be something other than a rectangle, I will limit my discussion to rectangles.

Step 2

Create the graphic for your map. There are lots of options here. There may be an appropriate graphic you can scan in and use, like a picture of your family. Clicking on a family member might bring up a page for that person. Or, you can create a graphic with a paint program, like Paintbrush. For example:

The GIF of the whole map is 185 by 108 pixels or pels (x,y). The upper left corner of the map is 0,0. This map actually has nine areas within it -- the eight rectangles defined by the eight letters such as:

The GIF of the letter B is 38 by 40 pixels or pels (x, y). If the user clicks on the retangle defined by the letter B, the user is hyperlinked to a page that deals with that letter. Each letter is assigned a unique URL in the Map File (see below). Also, the rectangle for each letter is determined relative to the upper left corner, hence the area for the letter B might actually be 45,5 83,45. (The upper left corner of B is 45,5 relative to the whole map, which is 0,0. To this you add the 38 and 40.)

The ninth area is the area outside of the eight letters, that is, the rest of the rectangle. If the user clicks on this area, he or she is sent to a default page, usually the current page.

Step 3

Create the map file. At RAIN, we are using a newer version of HTTPD, one that does not require that your map file either be in the "cgi-bin" subdirectory of the "httpd" subdirectory, or listed in a configuration file in that subdirectory. At RAIN, our map file is actually located in our "public_html" subdirectory of our home directory.

A map file should have a "default" line for the aforementioned extra area of the map, and a "rect" line for each other entity on the map. The line preceding the "rect" line is a comment line that is ignored by the IMAGEMAP program, but useful to the map maker. This is what a map file on RAIN looks like:

default http://www.rain.org/~hutch/
#they clicked on Drive
rect /~hutch/cars.html 30,190 120,288
#they clicked on Garage
rect /~hutch/skiing.html 1,60 100,170
#they clicked on Kitchen
rect /~hutch/sushi.html 100,40 220,60
etc.

The syntax for each "rect" line is:

Shape, in this case a rectangle
URL of the page to link to
Upper left and lower right coordinate of the rectangle in pixels

Step 4

Add the map and reference to your home page. This is actually the easy part. The reference has four elements, the URL of the "imagemap" program in the "cgi-bin" subdirectory, an argument for the "imagemap" program of your map file and its path, the image reference of the map GIF file, and the inclusion in the image reference of the notation ISMAP. For example, my map reference looks like this:

< A HREF = "http://www.rain.org/cgi-
bin/imagemap/~hutch/my_menu.map"> 

< IMG SRC = "home_map.gif" ALT = "my_menu" ISMAP>  < /A>

Note that the argument of "/~hutch/my_menu.map" has no space between it and the program "imagemap." Note also that "/~hutch/" is Web shorthand (and Unix shorthand as well) for "/usr/users/hutch/public_html."

That's all there is to a map. I hope your system is set up like RAIN, which makes maps so easy.

Mark S. Hutchenreuther is hutch@rain.org

Return to my home page.