Ohio University

skip to main content

Imagemaps on Front Door Servers


Table of Contents


A. Introduction

B. Step-by-step





An image that is located within an ordinary HREF anchor tag can be clicked to follow the link, but that link will be followed no matter where within the image your mouse pointer was when you clicked. An image map is a single image that provides multiple links: the result of clicking on the image depends on the precise location of the mouse pointer at the time it was clicked.

For example, see the on-line Athens Campus Map.

Neither people2 nor ww2 are configured to support any server-side imagemaps methods, so if you would like to use imagemaps on either of those servers you must use client-side (browser) imagemaps.

Imagemaps are browser-specific. The following discussion is based on the features shared by most modern browsers.

Three items are required in order to create an image map:

  1. An IMG tag that has the USEMAP attribute with an appropriate value; for example:

        <IMG SRC=image.gif USEMAP="#mapname" BORDER=0 ALT="">

    This tag is at the location in your HTML file where you want your imagemap to be displayed.

    The BORDER attribute in the IMG tag permits you to control whether or not the browser displays a border around your image.

  2. An image file in GIF or in JPG format that is the source in the IMG tag.

  3. A map data block, with name matching the USEMAP attribute in the IMG tag.

    If the USEMAP attribute is specified with an initial "#" symbol, as illustrated, above, that implies that the map datablock is within the current page, between the BODY and /BODY tags; if the USEMAP attribute starts with "http://," then the value is taken as an absolute URL; otherwise, the specification is taken as a relative URL.

    The map data block specifies each clickable geometric region on the image and the destination to go to if the cursor is in that region when it is clicked.





  1. If the image is not already part of the page, place an IMG tag at the appropriate location; include the USEMAP="#mapname" attribute, and specify also BORDER="0" if you do not want the browser to put a link-border around the image.

    The mapname must have no spaces or punctuation, and must be identical to the mapname you specify for the imagemap data block.

    For imagemap data blocks inside the HTML file, the initial pound-sign ("#") inside the quotes for the value is required for correct behavior in some browsers. Be sure that this attribute is separated from the other attributes inside the IMG tag by at least one space character.

  2. The imagemap data block may be placed anywhere in the HTML file, but the most reasonable places are immediately following the BODY tag and immediately prior to the IMG tag.

    • Enter the imagemap data, specifying an imagemap name that will match that used in the IMG tag.

    • The following example illustrates the specifications:

      <MAP  NAME="mapname">
      <AREA  SHAPE="circle"  COORDS="175,180  8"  HREF="../bldgs/cutlers.html">
      <AREA  SHAPE="polygon"  COORDS="184,175  209,201  209,250  152,242  159,202  165,187"  HREF="../bldgs/cutler.html">
      <AREA  SHAPE="rect"  COORDS="50,0  100,50"  HREF="wstate.html">
      <AREA  SHAPE="default"  HREF="../err.html">

    • Coordinates are measured in pixels to the right and down from the upper-left corner of the graphic image.

      Circles are specified by the coordinates for the location of the center and the radius.

      Rectangles are specified by the coordinates for the locations of the upper-left and lower-right corners.

      Polygons are specified by the coordinates for the locations of the vertices; the boundary will be straight line segments from vertex to vertex, in the order specified, with a final closing segment from the last point specified back to the first point specified.

    • There are several issues to keep in mind as you select regions and their defining coordinates:

      • If you have regions that touch, choose your coordinates to locate the border along the visible features of the graphic.

      • If you have regions that don't touch, choose your coordinates somewhat "outside" the natural boundaries, so that people who are hasty with their mouse will still end up linking to where they expected.

      • If you have adjacent non-touching regions, choose boundaries as near the middle of the "gap" as you reasonably can.

    • The HREF may be specified as an absolute URL, as a URL relative to the Front Door server (starting with a slash, "/"), or as a URL relative to the sub-subsite containing the page in question (starting with "../" to move "up" or "out" a level, if necessary).

    • If the destination can be reached with a URL that ends with a slash (i.e., if it is a default page), then that is the best choice, rather than specifying the full page filename. That way, if the page is moved to a different server, that has a different default filename, the link will still work if corresponding page redirects are in place.

    • If SHAPEs overlap, any point that falls within multiple regions will produce the result called for by the first of those regions to be listed.

      Hence, for "concentric" regions, or regions that are inscribed within other regions, specify the innermost region first.

    • The default SHAPE should be specified last because it effectively covers the entire graphic image. It therefore is the destination that many browsers will link to if the reader clicks at a location that is not within any of the other specified shapes.

  3. You can test your imagemap by opening the page in your browser from your disk drive -- it is not necessary to upload the file to the server for testing. Check that each region works, and that the boundaries between regions permit hasty clicking to succeed, even if the mouse is a few pixels off.