Using CommonSpot to Maintain
Ohio University Web Sites

Imagemaps

Browser-side imagemaps permit multiple destinations to be linked from one image, with the destination depending on the location of the mouse over the image at the time it is clicked. For example, see

In the current version of CommonSpot, this requires the author to edit the HTML directly. You can use the HTML view in the Rich Text Editor while preparing and revising two Formatted Text Blocks, or you can use CommonSpot's Rich Text Editor for one Formatted Text Block (for the image), and whatever editor you prefer to prepare an HTML fragment file on your personal computer, to be uploaded into an "HTML" element (for the imagemap data that connects coordinates to link destinations). A future version of CommonSpot may provide more built-in support.

If the imagemap is to be shared among multiple pages, then it should be in a template, so that it need only be revised in one place. If the various derived templates and pages to be built on that template, sharing the imagemap data, which specifies the regions within the image and their respective destinations, are to have different graphic images (for example, different backgrounds with the same navigational choices superimposed), then the imagemap data and the image itself must be in two separate elements: the imagemap data in an element that is part of the template (either an HTML fragment or a Formatted Text Block), and the image itself in a Formatted Text Block element that is part of the page (or next-level template). This is necessary in order that all elements in the template will be identical in all derived templates and pages built on that template. (See the discussion of element inheritance in the Intermediate Pagemasters material.) If the various templates and pages built on this template will be using the same graphic, then the image and the imagemap data can be combined into one Formatted Text Block, or split between two elements, as the author chooses. A Formatted Text Block that contains only imagemap data will initially show in author mode as "click here to define the textblock". After publication, it will appear as described in item 4, below.

Step-by-Step

1. Create a Formatted Text Block, with or without header, and edit it with the Rich Text Editor, or create an HTML fragment element, and upload the prepared file. The image will go into a Formatted Text Block; the imagemap data can go into either kind of element.

2. If this element will contain the graphic image, click on the Image tool and place the image as usual. Once the image is in the Formatted Text Block, you need to tell it to use the imagemap data:
   • Click on the "HTML" tab at the bottom.

   • Click inside the IMG tag and add the following attribute:
     USEMAP="#mapname"

     where the mapname must have no spaces or punctuation, and must be identical to the mapname you specify for the imagemap data. The initial pound-sign ("#") inside the quotes for the value is required for correct behavior in Macintosh Safari and some other browsers. Be sure that this attribute is separated from the other attributes inside the IMG tag by at least one space character.

   • The above steps must be re-done each time that the image is changed, because the Rich Text Editor's image tool will not remember the USEMAP attribute.

3. If this element is a Formatted Text Block that will contain the imagemap data, click on the "HTML" tab at the bottom of the Rich Text Editor window. If it is an HTML fragment element, prepare the file for uploading according to the following notes:
   • 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 location of the center and the radius. Rectangles are specified by the locations of the upper-left and lower-right corners. Polygons are specified by 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.

   • The HREF may be specified as an absolute URL, as a URL relative to the CommonSpot server (starting with a slash, "/"), or as a URL relative to the sub-subsite containing the page in question (starting with "../" to move "up" 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, the first one listed that contains the location of the cursor when the mouse was clicked is the one that takes effect.

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

4. After submitting the page for publication, if you return to revise the page, once you are in Author mode, a Formatted Text Block that contains only imagemap data will be visible on the screen only by the presence on the left margin, adjacent to each other, of the "element properties" and "edit content" tools: . To revise the imagemap data, just click on the "edit content" tool and select the only choice, "Edit header and text..."; then switch to HTML view, make your changes, and click on the "Finish" button.

5. A Formatted Text Block that contains only imagemap data and is "locked-down" in a template will not be visible on the screen at all while in Author mode on a derived template or page built on the template containing the imagemap data. You can confirm that the imagemap data is being properly inherited by the derived template or page by going to Read mode, choosing "Source" from your browser's "View" menu, and then searching for the imagemap name.

Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/commonspot/pageadv/imagemaps.html) on November 20, 2006.

Please E-Mail comments or suggestions to "webteam@ohio.edu".