The process for making server-side maps is virtually identical to that of making client-side image maps. The only real differences are in map file format. Each type of server can have a different type of image map configuration. In practice, only two main server-side map formats exist: NCSA and CERN.

	Creating a Map File
	Map File and the Image Map Program
	Linking it all Together

The heart of the server-side image map is a map file. Creating a map file involves sketching out the regions in your image that are clickable, determining the coordinates that define those regions, and deciding on the HTML pages where they should point. You can create a map file either by sketching regions and noting the coordinates by hand or by using an image map-making program.

The Mapedit and MapThis programs for Windows and WebMap for the Macintosh can all help you create map files in the NSCA format. In addition, MapThis also includes support for the creation of client-side image map definitions.

Many of the latest WYSIWYG editors for HTML pages, provide facilities for generating image maps.

If you use a UNIX-based system, there is a version of Mapedit available via FTP.

Once you've got a map file written for your image, you'll have to install both the map file and the image map program on your server and then hook everything up in your HTML files to use the image map. You'll need your image map program installed on your server, usually in a special directory called cgi-bin, which has been specially set up to store programs and scripts for your server.

Creating the map file is the hardest part of making an image map. Most servers have an image program set up by default, and if you're using someone else's server, that program will most likely be available to you as well. The program to look for is often called htimage or imagemap.

If you are not running the most recent version of the NSCA server, you can get the new image map program from
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemap.txt

For the linking purpose, you need to have an image, a map file, and image map program. In your HTML page that contains the image map, you will use the <A> and <IMG> tags together to create the effect of the clickable image. Here's an example using NSCA's image map program:

<A HREF="/cgi-bin/imagemap/maps/myimage.map">
<IMG SRC="image.gif" ISMAP></A>

Notice several things about this link. First, the link to the image map script (imagemap) is indicated the way you would expect, but then the path to the map file is appended to the end of it. The path to the map file should be a full pathname from the root of your Web directory (everything after the hostname in your URL), in this case /maps/myimage.map.

The Second part of the HTML code that creates a server-side map is the ISMAP attribute to the <IMG> tag. This is a simple attribute with no value that tells the browser to send individual mouse-click coordinates to the image map program on the server-side for processing.

And now, with all three parts of the server-side image map in place (the map file, the image map program, and the special HTML code), the image map should work. You should be able to load your HTML file into your browser and use the image map to go to different pages on your server by selecting different parts of the map.

When you create a client-side image map, many of the steps for finding the coordinates of each area on the map are exactly the same as they are for creating server-side image maps. Unlike a server-side image map, however, which uses a separate file to store the coordinates and references for each hyperlink, client-side image maps store all the mapping information as part of an HTML document.

	The <MAP> and <AREA> Tags
	The USEMAP Attribute

To include client-side image map inside an HTML document, you use the <MAP> (HP) tag. <MAP NAME="mapname"> coordinates and links </MAP>. Between the <MAP> and the </MAP> tags, you enter the coordinates for each area in the image map and the destinations of those regions using the same values and links. The coordinates are defined inside yet another new tag: the <AREA> tag. <AREA SHAPE="POLY" COORDS="x1, y1, x2, y2, x3, y3, [el], xN, yN" HREF="URL">. The type of shape to be used for the region is declared by the shape attribute, which can have the values RECT, POLY, and CIRCLE.

Example:

<MAP NAME="books">
<AREA SHAPE="POLY" COORDS="70,0,0,37,0,183,27192,27,48,103,9" HREF="/www/redbook.html">
</MAP>

After your client-side image map has been defined using the <MAP> tag, the last step is to put the image on your Web page. To do this, you use a special form of the <IMG> tag that includes an attribute called USEMAP. USEMAP looks like this: <IMG SRC="image.gif" USEMAP="#mapname">. Here mapname is the name of a map defined by the <MAP NAME="mapname"> tag.

Example:

<HTML><HEAD>
<TITLE>The Bookshelf</TITLE>
</HEAD><BODY>
<IMG SRC="books.gif" USEMAP="#books">
<MAP NAME="books">
<AREA SHAPE="Poly" COORDS="70,0,0,37,0,183,27192,27,48,103,9" HREF="www.redbook.html">
</MAP>
</BODY>
</HTML>

The main problem with using client-side image maps in your Web pages is that although client-side image maps are faster and easier to implement than server-side image maps, but they're not supported by all browsers. If you do use client-side image maps, it's a good idea to also create a server-side equivalent, and then modify your HTML files so that they support both forms of image map.

To create an image map that causes client -side support, if available, but falls back to server-side support when needed, take the following standard server-side definition:

<A HREF="/cgi-bin/imagemap/maps/myimage.map">
<IMG SRC="image.gif" ISMAP>
</A>

And add the client-side image map details as part of the <IMG SRC="image.gif" ISMAP> text, like this:

<A HREF="/cgi-bin/imagemap/maps/myimage.map">
<IMG SRC="image.gif" USEMAP="#books" ISMAP>
</A>

You will need to have installed the myimage.map file on your server and to have included the "books" <MAP> tag definition somewhere in your HTML document.