Division of Information Technology
Web Publishing @ SFSU
Clickable Images

What Are Clickable Image Maps ? Image maps are used to create sensitive clickable images that respond to the area of the image the visitor click on. Not all browsers can view or interact with clickable images, so alternate text based links must always be provided. Image maps are created by mapping the different areas of an image using the x,y coordinates. The coordinates are recorded as circles, squares, rectangles, oblongs, and polygons. Fortunately there are programs that can be used to select an area and automatically record the coordinates. Each object's coordinates are assigned a URL that is to be linked when they are selected. A default URL is also assigned for those areas that lead nowhere. The coordinates and URL's are stored in a configuration file that must be placed in the server's script area.

Here is are some examples of clickable image maps.

The Clickable Garden example uses images stored in a subdirectory called flowers.
The Clickable Campus example appears more complicated because the irregular shapes of the campus buildings are mapped using polygon coordinates. Recording the polygon coordinates was done by tracing the building outlines using imagemap tools.

Step by Step Process for Creating a Clickable Image Map An HTML document is created that:
  1. Displays the clickable image inline.
  2. Includes a reference to the corresponding image map configuation file. To create an imagemap configuration file use software tools or manually determine the xy coordinates following the format shown below. The map file must end with suffix ".map". When using imagemap software select the NCSA for your imagemap coordinate file format.
  3. Uses the ISMAP command within the inline image HTML tag. Example:
    <A HREF="filename.map">
    <IMG ALT="" SRC="filename.gif" ISMAP>
    </A>
  4. Provides alternate text based links for non-graphical browsers.
Note: imagemaps only work when the .map file has been placed on the server.
Imagemap Configuration File We recommend using imagemap software tools to determine the map coordinates. To manually create an imagemap coordinate file determine the xy coordinates of the parts of the image which will be mapped. Then create an imagemap configuration file, which maps regions to URLs for the given image. In other words, this file contains information about the regions in the picture that correspond to other URLs.

The format of a imagemap file is fairly straightforward. The first line of the file specifies the default response, or the URL that corresponds to a click outside any defined regions. It syntax is:

default URL

Subsequent lines specify the regions in the image that correspond to URLs.

Definable Regions There are four types of regions that can be defined:
circle URL x_center,y_center x_edgepoint,y_edgepoint
This keyword defines a circle region with center point x,y and edgepoint x,y.
rectangle URL x1,y1 x2,y2
This keyword defines a rectangle region with any two opposite corners having coordinates x1,y1 and x2,y2.
polygon URL x1,y1 x2,y2 ... xn,yn
This keyword defines a polygon region having adjacent vertices xi,yi. If the path given in not closed the first and last coordinate pairs will be connected.
point URL x,y
This keyword defines a "closest to the a point" region, where the point's coordinates are x,y.

These above keywords can be abbreviated as def, circ, rect, and poly.

Lines beginning with the pound symbol are comments.

Special Considerations Each keyword is evaluated in the order it is placed in the imagemap configuration file. Therefore, if in the case of overlapping regions, such as if a circle was defined inside a rectangle, whichever region should be activated first should be before the other in the imagemap configuration file.
For More Information Clickable Image Map Software
ISMAP server-side programs
Yahoo's Imagemaps Resources.
Image map Authoring Guide & Tutorial Site.

About | Getting Started | Create | Publish | Enhance | Advertise | Maintain
Index | Glossary | Software | For more Information


SFSU Home   Search   Need Help?  

1600 Holloway Avenue, San Francisco, CA 94132 (415) 338-1111
Last modified February 11, 2008 by the Web Team