Creating Client Side Image Maps

Overview

There are two steps to creating client side image maps:

Define pixel location.
Create a map file within the HTML document that contains your image map.

Step One: Define Your Pixel Locations

If necessary, refer to our documentation on how to define your pixel locations. For creating a client side image map, you will need to specify your pixel locations as follows:

RECTANGLE (RECT): Requires the upper left and lower right of the defined box.
In this image A=26,72 and B=145,146.

CIRCLE (CIRCLE): Requires the center point and radius (in pixels).
In this image A=262,110 and B=42.

POLYGON (POLYGON): Requires the coordinate of EACH vertex (point) of the area you want to define.
In this image A=389,64 B=440,64 C=465,105 D=440,147 E=389,147 F=365,105. You can define up to 100 points using polygon.

Step Two: Create an Internal Map File

The format we used to create this client side image map pictured in Step One is as follows.

Note: The bold numbers before each line should not be included in your HTML document. They correspond to the explanation of each line that follows this section on code.

1 <IMG SRC="test.GIF" USEMAP="#test"> 
  2 <MAP NAME="test"> 
  
3 <AREA SHAPE="RECT" COORDS="26,72,145,146"
  href="two.html">
4 <AREA SHAPE="CIRCLE" COORDS="262,110,42"
  href="three.html">
5 <AREA SHAPE="POLYGON" 
  COORDS="389,64,440,64,465,105,440,147,389,147,365, 105" href="four.html">
6 <AREA
  SHAPE="RECT" COORDS="0,0,499,212" href="one.html"> 
  
7 </MAP>

1. This line specifies the image we used for the client side image map. It also tells the browser where to look in the HTML document for the internal map file. In our example, USEMAP="test" points the browser to the correct location of the internal map file, and, therefore, USEMAP="test" is called a pointer. Your internal map file can begin anywhere within you HTML document. While the name of our map file, "test", is similar to the name of our GIF file, yours does not need to be. You can use any naming convention you desire. However, you need to start the name of your pointer with the pound sign (#) for it to work.

2. This line marks the beginning of our image map file. Because MAP NAME="test" is the destination to which our pointer points, it is referred to as a destination marker. You should replace the name of our internal map file with yours as follows: <MAP NAME = "your specific map name" >

3-5. These lines identify each of the "hot spots" in our image and their corresponding URLs. You should replace these lines with your specific pixel locations and URLs. If you experience any problems with your image map, be sure to examine this portion of your HTML document very closely. Make sure to include all of the commas, pound signs, equal signs, and quotation marks where specified. It is easy to make typos in this step.

6. This line, which specifies the pixel locations for the entire .GIF image, identifies a default URL. It must be the last hot spot listed in your internal map file. This is a location that a person will go to if s/he clicks on a part of your image map that is not a hot spot. If you do not specify a default URL, you may confuse the user. Nothing will happen when s/he clicks on an inactive part of your image, and s/he will not know if the image is an image map or not.

7. This line contains the ending tag for the image map. You should type this exactly as it appears in our code.