An imagemap allows you to link to different URLs based upon where you click on an
image. They are useful for creating maps, diagrams, fancy buttons, etc. They do require a
program running on the server, so following links from an image is slower than a normal
link.
There are two parts to an image map. An image (just a standard GIF image will do
nicely) and a map file. The map file defines areas of the image and the URLs that
correlate to the different areas. These instructions do not show how to create the GIF
file, only the map file and how to link the two together.
Defining the Map File
- A map file is a text file, and you can create it in the same way you create an html
file. Each line of the map file defines a different area of the image and the URL to go
to. NOTE: You MUST give the ENTIRE path to the URL, giving just the filename is not
adequate and will not work.
-
Defining the Default
Typically, the first line is a default line telling where to go if they click on an
undefined area. In this example they are sent to the /~pested/patweb/noarea.html
page. The first line looks like this...
- default noarea.html
- The rest of the map file defines the areas of the image that are "clickable."
There are two basic types of areas (covered here), RECTangles and POLYgons. RECT
or POLY is the first thing specified in the line, then 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 orangearea.html
page. The line in our map file would look like this...
- rect /~pested/patweb/orangearea.html 50,0 200,50
- and the yellow and blue rectangles like this...
- rect /~pested/patweb/yellowarea.html 0,0 50,100
- rect /~pested/patweb/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 redarea.html
page. The line in our map file would look like this...
- poly /~pested/patweb/redarea.html 300,0 350,0 450,100
200,100
- and the purple polygon like...
- poly /~pested/patweb/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 /~pested/patweb/noarea.html
- rect /~pested/patweb/orangearea.html 50,0 200,50
- rect /~pested/patweb/yellowarea.html 0,0 50,100
- rect /~pested/patweb/bluearea.html 50,50 200,100
- poly /~pested/patweb/redarea.html 300,0 350,0 450,100 200,100
- poly /~pested/patweb/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 put a link to a cgi program called
"imagemap" pointing to the map file. Then inside the link you put the image with
an ISMAP variable in the IMG tag. It's easiest to just look at an example...
- <A HREF="imagemapMAPfile">
- <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 shapes.map and the
GIFfile is shapes.gif so our html code to link the two would be...
- <A HREF="imagemapshapes.map">
- <IMG SRC="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 as you place your cursor over the
image map, it will show you in the status bar the coordinates of where the cursor is. This
is not perfect, but it is accurate enough for image maps.
-
Using an Automatic Map Creation Program
- There are many programs available to create map files automatically for you. Two that I
would recommend (but don't support) are MapEdit for the Windows and WebMap for the
Macintosh. When using these programs, the type of map file you need to create is a
"NCSA Imagemap". NO SUPPORT IS PROVIDED FOR THESE PRODUCTS:
- WebMap (Mac) - http://www.city.net/cnx/software/webmap.html
- MapEdit (PC) - http://www.boutell.com/mapedit/
-
Other Details
- There other options to map files like circles and nearest-to variables, as well as
client-side image maps, that are not described here. For more information on other
variables, you can read NCSA HTTPd's on-line Imagemap Tutorial.
For information on client-side imagemaps, check out Spyglass'
tutorial on Implementing
Client-Side Image Maps.
|
