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.
- Create your graphic with the graphic tool of your choice (PhotoShop, SuperPaint,
Hypercard, Illustrator, Kidpix, etc.).
- 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).
- 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.
- start up WebMap
- load your graphic (use "Open" from the "File" menu)
- create all the hotspots you want, using the hotspot tools
- save the file
- 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")
- 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>
- "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>
- 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.
- 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