OIT Tech 32px
pagemasters toolbox -- classic commonspot

V6 Browser Side Imagemaps in Classic CommonSpot


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

http://www.ohio.edu/athens/greens/sports.html

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  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 (an HTML fragment), 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 both be combined in the template.

 

Step-by-Step


  1. Create a Formatted Text Block element to contain the graphic image; click on the Image tool and place the image as usual.

  2. Once the image is in the Formatted Text Block, you need to tell it to use the imagemap data:

    • Click on the "HTML" button in the upper-left quadrant of the RTE's toolbar.

    • 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 (see below).  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.

    • Return to normal view; save.

    • This step 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. Create an HTML fragment element containing the imagemap data, and upload the prepared file.  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, after choosing "Work on Page" or "Work on Page (all changes)," an HTML element that contains only imagemap data will be visible on the screen only by the presence on the left margin of an "element properties" ("gear wheel") tool: .  To revise the imagemap data, update the HTML file on your computer, and then click on the gear wheel tool and select "Upload Content" to replace the old with the new.

  5. An HTML element that contains only imagemap data and is "locked-down" in a template will not be visible on the screen at all while working 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 viewing the page as published; exiting from the CommonSpot dashboard; choosing "Source" from your browser's "View" menu; and then searching for the imagemap name.