Creating an imagemap

About this task

An imagemap is a graphic you enhance with programmable hotspots that perform some action when a user clicks on them. Image maps are often used as navigational structures in an application. For example, an imagemap of a plate of food might have hotspots users click to see recipes for the food pictured. Unlike a navigator, which is an independent design element, an imagemap resides on a page or form, so you can easily combine an imagemap with text and other page or form elements, and you can control the display of an imagemap using a hide-when or computed-for-display formula. If you plan to create a site map or navigator that combines several graphics with text and action buttons, create a navigator instead of an imagemap.

An imagemap can be any graphic you can paste or import into a page or form, with the exception of graphics in PI format. If you create an imagemap and then need to change the graphic, you can change the graphic while keeping the hotspots intact.

To create an imagemap

Procedure

  1. Paste, create, or import a graphic or image resource on a page or form.
  2. Select the graphic.
  3. Choose Picture - Add Hotspot <hotspot shape>.
  4. Click and drag to draw the hotspot on the graphic.
    Note: To draw a polygon hotspot, click the points of the polygon, double-clicking to close the outline. To draw a hotspot around the entire graphic, select Default Hotspot.
  5. Do one of the following:
    • Choose Picture - Hotspot properties. On the Hotspot Info tab of the Hotspot <shape> Properties box, specify a link, named element link, or URL link. For information on linking, see the topic "Creating links" in the chapter "Designing Pages."
    • In the Script area of the Programmer's pane, specify a simple action, formula, or LotusScript® or JavaScript routine to run when a user clicks the hotspot.
  6. On the Advanced tab, add alternate text.
  7. Optional: Specify a target frame where the linked document will display when a user clicks the hotspot.
  8. Optional: On the Advanced tab, specify the Imagemap tab order for the hotspot. The tab order specifies the order in which hotspots are selected when a user presses the TAB key.

To move a hotspot

About this task

Once you create a hotspot you can move it as necessary. To move a hotspot, do one of the following:

  • Click and drag the hotspot that you want to move.
  • Select the hotspot and use the arrow keys to move one pixel at a time.

To delete a hotspot from an imagemap

Procedure

  1. Select the hotspot.
  2. Choose Picture - Delete Selected Hotspot(s).

To copy an imagemap

About this task

You can copy an imagemap from another page, form, or document, and Domino® Designer will maintain all of the hotspots from the original imagemap.

Procedure

  1. Select an imagemap and copy it to the Clipboard.
  2. Open the page or form where you want to place the imagemap and choose Edit - Paste.

To change the graphic for an imagemap

Procedure

  1. Select the current graphic.
  2. Choose Picture - Replace picture.