Presentation - Image Maps

What are Image Maps?: Image Maps are Images that Allow Movement through Web Documents using your computer's pointing device. On the FortNet Home Page (http://www.fortnet.org), the button bar displayed at the bottom of that page (for users of graphic Web Browsers) is an Image Map. If you have used the FortNet button bar (Help, Feedback, Search, etc.), then you have already used an image map. This presentation will show you how to make your own image maps.

Why are Image Maps so handy?

Images Maps Allow For Rapid Navigation of Web Documents.
Images Maps Draw Our Attention Readily, maikng them visible guideposts
Images Maps can add Drama to a Web page

Who can make Images Maps?: Anyone can make Image Maps. Depending on how your Web Server is set up, you may be able to put image maps in the server's CGI binary directory, where a variety of scripts, maps, forms, etc. may reside. Many servers have a special script called htimage set up to let any valid user (with an account on the server) include image maps in their Web pages.

When should you use an Image Map?

Image Maps should be used to make your pages both functional and FUN. Generally, it is good design practice to use no more than one or two images maps on a given page.

This is primarily for two reasons:

Loading images associated with a page takes time (especially if you are using a slow modem or the Web server supplying the image is busy).
Use of too many pictures can be distracting, taking away from the focus of the page.

How do you set up an Image Map?

Set up your web page per the instructions given in October's presentation on HTML Tools.
Create a directory for your image map(s):
mkdir $HOME/public_html/htimage chmod a+rx $HOME/public_html/htimage
As you add other files below, you need to make each of them readable to everybody by doing this:
chmod a+r $HOME/public_html/htimage/*
Create the GIF image to be used for the map.
This could entail the use of a painting or drawing program, as well as some image cleanup tools. Windows users could use MSPaint, MSDraw, and LViewPro for these tasks (respectively). Mac users might use MacPaint, MacDraw, and JPEGView to the the same respective tasks; Unix users might use a bitmap editor, a drawing package, and XV to do the same things.
The 'jet plane and earth' drawing above (jetearth.gif) was produced by using Corel Draw to combine scanned images, Photo CD images, and objects drawn manually. The image was refined in LViewPro, then uploaded to the FortNet server using the WS_FTP program.
Add the image map statement to the desired document.
On this page the jetearth.gif image is represented by the following fragment of HTML code:
```
<A HREF="/cgi-bin/htimage/FortNet/HTML/Presentation/ImageMap/htimage/jetearth/jetearth.map">
<IMG SRC="image/jetearth.gif"  ALIGN=LEFT VSPACE=10 ISMAP></A>
```
The VSPACE and ALIGN keywords are optional, but the ISMAP keyword is mandatory for imagemaps. The HREF portion invokes the htimage program, which uses the specified map file (in this case, /FortNet/HTML/Presentation/ImageMap/htimage/jetearth/jetearth.map) to determine the 'hot spots' on the image.
Create the map file. It defines the 'sensitive areas' of the image.
For the jetearth.gif image, a file called jetearth.map was produced. It defines a rectangle around the image of the plane, a circle the corresponds to the red dot on the globe, and a circle corresponding to the globe itself. The file looks like this:
```
default /FortNet/HTML/Presentation/ImageMap/htimage/map1/invalid.html

rect (1,0) (199,210) /FortNet/HTML/Presentation/ImageMap/htimage/jetearth/plane.html

circle (354,154) 7 /FortNet/HTML/Presentation/ImageMap/htimage/jetearth/red_dot.html

circle (372,101) 100 /FortNet/HTML/Presentation/ImageMap/htimage/jetearth/earth.html
```
Note that the globe's circle (4th line in the file) follows the circle corresponding to the red dot, so the red dot's circle has precedence over that of the globe.
The actual coordinates were determined by observation, i.e., by moving the mouse cursor around the jetearth.gif image in this file, making note of the coordinates displayed in the status box at the bottom of my Netscape window. Inelegant, yet effective. Most people would choose to use one of the image map tools listed later in this document.
Test your map, by clicking in both the middle and outer regions of the 'hot spots' you defined in your map file.
The jetearth.map file was verified by ensuring that clicking on the plane caused /FortNet/HTML/Presentation/ImageMap/htimage/jetearth/plane.html to display, clicking on the red dot made /FortNet/HTML/Presentation/ImageMap/htimage/jetearth/red_dot.htmlappear, etc. Clicking in the open space above the image of the plane caused the 'invalid' message to appear.

Where can I find out more about Image Maps?: At the end of this document are pointers to Image Map Tools for Windows, Apple, and Unix machines. There is also a list of other image map tutorials out on the Web here, too. Just select one of the 'jump points' shown here to reach them. Or, better still, try the image map below!