Advanced HTML: Imagemaps

What are Imagemaps? Imagemaps are images that have "hotspots" linking to other web documents. In other words, if you click on an imagemap you will follow a certain link only if you click in an area of the image in which that link is defined. For example, you might see a single image of the United States in which each state is outlined; if your browser retrieves different information depending on which state you click, it is an imagemap.
Let's looks at an example: http://www.ncsa.uiuc.edu/edu/.
There are two types of imagemaps: server-side and client-side.
- Server-side imagemaps require that a HTTP server capable of interpreting imagemaps is used. Typically, this will require that a webmaster enable a cgi-bin imagemap script. When a server-side imagemap is used, the coordinates of a click on the imagemap are sent to the server and the server determines if the "click" falls within a defined region of the image associated with a hyperlink. When server-side imagemaps are used, separate "map" files are pointed to from the html document containing the image.
- Client-side imagemaps require that the client browser understands how to interpret imagemaps. Most browsers are now capable of this, including Netscape and Internet Explorer. When a client-side imagemap is used, the coordinates of a click are not sent to the server, the browser determines what area of an image is clicked and then associates it with the appropriate hyperlink. When client-side imagemaps are used, the "map" is included as a few lines within the html document containing the image. Client-side imagemaps are highly recommended as they are easier to write and more efficient for the end-user.
Implement your own imagemap:
1. Identify a GIF or JPEG image. This could be an existing picture or one that you create with the graphic tool of your choice.
2. Record the coordinates of each hotspot you would like to create. You will need the X,Y coordinates of the upper left hand corner and lower right corner of a rectanglular hotspot, or the center and a point on the edge of a circular hotspot, or each point of a polygonal hotspot. The coordinates are in pixels and 0,0 is located in the upper left hand corner of the whole image. To find the coordinates you will need an application that has an option to display coordinates of the cursor. Most graphics programs have this option.
3. Now you are ready to write a map script for your image. If you use a client-side imagemap, this script will be part of your html document. If you use a server-side imagemap, this script will be placed on the HTTP server, usually in a directory called "/cgi-bin/imagemap." The script must contain the following: a) a default URL, b) the shape of the hotspot (rectangle or circle), and c) a URL for each hotspot.
4. If you wish to use client-side imagemaps (recommended), you would put these script lines within a "map" tag format:
  <MAP NAME="demo"> <AREA SHAPE="RECT" COORDS= "24,18,143,41" HREF="doc1.html"> <AREA SHAPE="RECT" COORDS= "168,18,287,41" HREF="doc2.html"> </MAP>
  The image tag itself would look something like:
  <IMG SRC="image.gif" USEMAP="#demo">
  There are several HTML editors that will create these script lines for you; for example, Claris Homepage and Web Weaver. You might also wish to look at Spyglass' Client-side Imagemap Tutorial.
5. If you wish to use server-side imagemaps, use the following syntax in a separate text file:
  Default URL (usually the current document) rect URL left(x),top(y) right(x),bottom(y)
  [or]
  circle URL center-x,center-y edge-x,edge-y[or]
  poly URL x1,y1 x2,y2 ... xN,yN x1,y1
  (type a rect, circle, or poly line for each hotspot in the map)
  1. Save your script as "<something>.map". Put the HTML file referring to the image map, the GIF file and the map script file on the server. The GIF file and the map script usually go into a "/cgi-bin/imagemap" directory.
  2. If you use a Macintosh, there is also a program that will automatically generate a script of coordinates for you: MacMapMaker, available at http://www.ncsa.uiuc.edu/edu/MMM/. If you do use MacMapMaker, please note that you will need to save the graphic as a PICT to generate the coordinate script AND as a GIF to use on your web server. After starting up MacMapMaker, create a new "map" (click the "new map" button), load in the "PICT" form of your graphic (click the "load" button), and create all the hotspots you want (using the hotspots tools). When you're done be sure that NCSA HTTPd is selected as the output format (menu item).
  3. There are also map-generating programs available for PC Windows and Unix.
  4. Now you're ready to write the HTML tag line in your base HTML file that will reference the image map.
    - <a href="/cgi-bin/imagemap/file.map"><img src="directory/of/your/image/file/image.GIF" ismap></a>
    - Note that your webmaster will probably have the server set up so that all imagemaps need to go into a single directory, such as "/cgi-bin/imagemap/"; you probably will not be able to simply put the image map files in your own directory; you will need to submit these files to your webmaster. If you are a webmaster, you will want to create a "cgi-bin/ismaps" directory in your HTTPd directory and put all ".map" files in that directory.
  5. You need to test your "map" by putting your files on a server. You won't be able to test your "map" by reading the HTML file in "locally" since there is no server application to carry out the instructions in the "script" file.
6. If you are a webmaster, and would like to set up your Unix server to handle imagemaps, see the NCSA HTTPd Imagemap tutorial.