An imagemap allows you to create links to different URLs according to where you click on the image. Imagemaps are useful for creating links on maps, diagrams, fancy buttons, etc. They do require a program running on the server, so linking through an image is slower than a normal link.

There are two parts to an image map. The image (a standard GIF image will do nicely) and the map file. The map file defines the areas of the image and the URLs that correlate to each different areas. The following instructions do not show how to create the GIF file, only the map file and the process for linking the two together.

Defining the Map File

A map file is a text file, which can be created in the same way you create an HTML file. Each line in a map file defines a different area of the image and the URL to go to. NOTE: You MUST give the ENTIRE path for the URL, providing the filename alone will not work.

Defining the Default

Typically, the first line in the map file is a default line which indicates where users will link to if they click on an undefined area. In this example users will be sent to

/HTML/IMAP/noarea.html

Therefore, the first line looks like this...

default /HTML/IMAP/noarea.html

 

The rest of the map file defines the areas of the image that will be "clickable." Two basic ways are covered here for defining areas, RECTangles and POLYgons. RECT or POLY is specified first, followed by the URL, then two or more x,y coordinates.

Defining Rectangles

A rectangle is defined by two coordinates, the upper-left and lower-right points. In our example, the ORANGE box can be defined by 50,0 (over 50 pixels, down 0) and 200,50 (over 200 pixels, down 50).

 

 

When we click on the orange box, we would like the browser to go to the

/HTML/IMAP/orangearea.html

page. The line in our map file would look like this...

rect /HTML/IMAP/orangearea.html 50,0 200,50

and the yellow and blue rectangles like this...

rect /HTML/IMAP/yellowarea.html 0,0 50,100

rect /HTML/IMAP/bluearea.html 50,50 200,100

Defining Polygons

A polygon is defined by a series of coordinates that outline the area to be defined. You can start at any corner of the polygon and work your way around in any direction. But for consistency, I recommend starting at the highest point and to the left, then working around clockwise.

 

In our example, we can define the red area by starting at the point 300,0 (over 300 pixels, down 0), then over to 350,0 then right and down to 450,100 then back left to 200,100. We don't need to close off the polygon since the starting point is the same as the ending point.

 

 

When we click on the red polygon, we would like the browser to go to the

/HTML/IMAP/redarea.html

page. The line in our map file would look like this...

poly /HTML/IMAP/redarea.html 300,0 350,0 450,100 200,100

and the purple polygon like...

poly /HTML/IMAP/purplearea.html 200,0 300,0 200,100

The Complete Map File

The order of the lines in the map file is not important. Most authors will place their "default" line first. The filename is not important, but most people will call the map file the same name as the gif file and end it with the .map extension. Our example image is named shapes.gif so I named the map file shapes.map and it would look like...

default /HTML/IMAP/noarea.html

rect /HTML/IMAP/orangearea.html 50,0 200,50

rect /HTML/IMAP/yellowarea.html 0,0 50,100

rect /HTML/IMAP/bluearea.html 50,50 200,100

poly /HTML/IMAP/redarea.html 300,0 350,0 450,100 200,100

poly /HTML/IMAP/purplearea.html 200,0 300,0 200,100

 

Linking the Map to the Image in a Document

For the map file to work, you must include a link on your page to a cgi program called "imagemap" pointing to the map file. Inside the link you should put the image with an ISMAP variable in the IMG tag. It's easiest to just look at an example...

<A HREF="/MAPfile">

<IMG SRC="GIFfile" ISMAP></A>

we typically put BORDER=0 in the image file so we do not get the standard blue link border around the image. The MAPfile in our example is /HTML/IMAP/shapes.map and the GIFfile is /HTML/IMAP/shapes.gif so our html code to link the two would be...

<A HREF="/HTML/IMAP/shapes.map">

<IMG SRC="/HTML/IMAP/shapes.gif" BORDER=0 WIDTH=450 HEIGHT=100 ISMAP></A>

 

Finding Coordinates

The simplest way to find the values for the coordinates of an image is to create the HTML for the imagemap before creating the map file. Then when you place your cursor over the image map, it will show you the coordinates in the status bar. This method is not perfect, but is accurate enough for image maps.