Updated Guide to creating interactive maps for a Mac Web server

Here is a quick guide to creating in-line graphics in your HTML files that do different things when you click in different places ("maps" in HTML-speak). The first 3 steps are tailored for folks using Macs to create Web files for our LRS (Mac-based) Web server. If you're preparing your HTML and GIF files on another platform, replace the Mac applications with their equivalents.
  1. Create your graphic with the graphic tool of your choice (PhotoShop, SuperPaint, Hypercard, Illustrator, Kidpix, etc.).
  2. You'll need have the graphic in GIF format, so convert it appropriately. You may be able to "Save AS" that format from the application where you created the graphic or you may need to use a converter application (like GraphicConverter or GifConvertor, for instance).
  3. Use the WebMap application to create the "hotspots" (regions where the user is to click) and the associated URLs (places to go in the Web). There is some minimal documentation for WebMap.
    1. start up WebMap
    2. load your graphic (use "Open" from the "File" menu)
    3. create all the hotspots you want, using the hotspot tools
    4. save the file
    5. generate a "map" file (select "Export as text" from the "File" menu; be sure that "NCSA" is selected as the format below the file name; make sure the map file name ends in ".map")
  4. In the HTML document that is to contain the graphic, bring in the graphic in the usual way, but append "ismap". So, if I have a graphic file (in GIF format) called MYGRAPHIC.GIF, the HTML file would contain this line:
    <img src="MYGRAPHIC.GIF" ismap>
  5. "Link" that graphic to the "map" file you created with WebMap. So if the map file is called MYGRAPHIC.MAP, then the line would look like:
    <A HREF="MYGRAPHIC.MAP"><img src="MYGRAPHIC.GIF" ismap></A>
  6. Put the HTML file, the GIF graphic file and the "map" file into the same folder on the server. Then you should be able to test whether this all works with a Web browser like Netscape or Mosaic or MacWeb.
  7. If it doesn't work exactly the way you want it to (or should I say "When it doesn't work"), then you're going to have to change one or more of these files and try again. You won't be able to test your "map" by reading the HTML file in "locally" (using the "Open File" command of Netscape or the "Open" command of MacWeb or the "Open Local" command of Mosaic), since there is no server application then to carry out the instructions in the "map" file. To test your "map", you have to have the files on the server, and open them with the "Open Location" command.

If you do all this and all you see is the text of the "map" file when you click on your graphic, first verify that you have "ISMAP" in the "<IMG SRC .." tag, separated by a space from the rest of the tag and all one word. Secondly, verify that you are opening the file using "Open Location" (see above). Thirdly, check with your webmaster that there is software on your server to handle "image map" files. If it is a Mac server, the webmaster can install "Mapserve," which is a shareware application that will handle the kind of "map" files created by WebMap.


Happy Map Making,
Jim Levin <j-levin@uiuc.edu>
Last updated: 20 May 1996