OIT Tech 32px
pagemasters' toolbox -- static pages

Imagemaps on Front Door Servers


Appendix III Table of Contents


A.  Introduction

B.  Step-by-step


 

Introduction


An image that is located within an ordinary HREF anchor tag can be clicked to follow the link, but you follow that same link no matter where within the image your mouse pointer was when you clicked the button.  An image map is a single image that provides multiple links:  the result of clicking in 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.

Some servers support image maps by using CGI scripts, with resulting restrictions on the location of one or more of the component files.  Other web servers support imagemaps with built-in programs configured so that all the component files are located within the same folders as the web files.  Neither people2 nor ww2 are configured to support any server-side imagemaps methods.

To use imagemaps on people2 or ww2 pages, 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.

    The web page will display faster if you also include the optional WIDTH and HEIGHT attributes, with the appropriate values.

  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.


 

Step-by-step


The procedure for preparing the map data block is straightforward, but several parts of it can be tedious.

  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 versions of Macintosh Safari and other 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">
      </MAP>

    • The COORDS attribute value must be specified with surrounding quotes, because it will contain space characters.

    • 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.