This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

Microsoft FrontPage 2003

Image Maps: Creating Hotspots

An image map is an image containing one or more clickable sections (i.e., hotspots), which are assigned hyperlinks. Image maps can provide visual clues to the type of link. For example, the Campus Virtual Tour provides a map of the campus and links to all of the UW-Eau Claire campus buildings. The geographical map of the campus is the image map and the buildings are the hotspots. In general, an image map should be relevant to its corresponding link.

When assigning links to hotspots, it is helpful to understand the difference between absolute and relative links. Absolute links are links to pages on the Web for which you must provide the complete URL. Relative links are links within your personal collection of pages that can be identified by their filename and, in some cases, the path of the file; therefore, it is not necessary to provide a complete URL for relative links.

NOTE: For more information on links, refer to Linking to Pages in Your Collection and Linking to Internet Resources. For additional information regarding the toolbar buttons, refer to Overview of Clip Art: Common Toolbar Buttons. For additional information on hotspots, refer to Editing Hotspots.

return to topCreating Hotspots

In FrontPage, you can create five different types of hotspots, including the following:

Default
This procedure allows all parts of an image to contain a default hyperlink. Therefore, if you click on part of an image not containing a hyperlink, you will be automatically taken to the default hyperlink.

Circular
This procedure allows you to create a circular hotspot. For example, if a portion of an image map contains a circular image, such as a basketball, a circular hotspot is the best choice.

Polygonal
This procedure allows you to create a hotspot with an irregular shape. For example, you may want a map of the United States as your image and each state as a hotspot with an assigned hyperlink. Thus, the polygonal tool is your best choice for precision.

Rectangular
This procedure allows you to create a rectangular hotspot. This tool can be used for portions of images resembling a rectangle or square.

Text
This procedure allows you to create text that acts as the hotspot.
NOTE: Text hotspots can only be used with GIF images.

return to topSetting a Default Hyperlink

This procedure allows you to create a default hyperlink for all portions of an image not containing hotspots. After setting the default hyperlink, you can proceed to create circular/rectangular, polygonal, or text hotspots.

  1. Double click the desired image
    OR
    Right click the desired image » select Picture Properties...
    The Picture Properties dialog box appears.

  2. Select the General tab
    Picture Properties dialog box - General Tab

  3. For an absolute link, under Default hyperlink, in the Location text box, type the complete URL
    EXAMPLE: Type http://www.uwec.edu
    For a relative link, under Default hyperlink, in the Location text box, type the filename of the page to which you want to link
    EXAMPLE: Type home.htm

  4. Click OK
    The default hyperlink is set.

return to topCreating Circular or Rectangular Hotspots

To insert a circular or rectangular hotspot into your image, use the following instructions:

  1. Select the image that will contain the hotspot(s)
    The Pictures toolbar appears.
    NOTES:
    The Pictures toolbar may appear as a floating toolbar on your page, or it may be docked at the bottom or top of your screen.
    If the Pictures toolbar does not appear, from the View menu, select Toolbars » Pictures
    Pictures toolbar

  2. On the Pictures toolbar, click CIRCULAR HOTSPOTCircular Hotspot buttonor RECTANGULAR HOTSPOTRectangular Hotspot button

  3. Position the pointer over the selected image
    The pointer becomes a pencil.

  4. To shape the desired size of the hotspot, click and drag the pencil pointer

  5. When you have drawn the entire shape, release the mouse button
    The Insert Hyperlink dialog box appears.
    Insert Hyperlink dialog box

  6. In the Address text box, type the desired URL for the hotspot link

  7. Click OK
    The hotspot is created.
    HINTS:
    To move the hotspot, click and drag the hotspot to the desired location.
    To remove the hotspot, when the sizing handles are present, press [Delete].

return to topCreating Polygonal Hotspots

To insert a polygonal hotspot into your image, use the following instructions:

  1. Select the image that will contain the hotspot(s)
    The Pictures toolbar appears.
    NOTES:
    The Pictures toolbar may appear as a floating toolbar on your page, or it may be docked at the bottom or top of your screen.
    If the Pictures toolbar does not appear, from the View menu, select Toolbars » Pictures
    Pictures toolbar

  2. On the Pictures toolbar, click POLYGONAL HOTSPOTPolygonal Hotspot button

  3. Position the pointer over the selected image
    The pointer becomes a pencil.

  4. Click the image where you want to place the first corner of the polygonal hotspot

  5. Click to place additional corners as necessary

  6. To complete the polygonal hotspot, double click the last corner of the hotspot
    The Insert Hyperlink dialog box appears.
    Insert Hyperlink dialog box

  7. In the Address text box, type the desired URL for the hotspot link

  8. Click OK
    The polygonal hotspot is created.
    HINTS:
    To move the entire hotspot, click and drag the hotspot to the desired location.
    To remove the hotspot, when the sizing handles are present, press [Delete].

return to topCreating Text Hotspots

Text hotspots are an easy way to create links for image text or image labels.

WARNING: A text hotspot can only be created with GIF images.

  1. Select the image that will contain the hotspot(s)
    The Pictures toolbar appears.
    NOTES:
    The Pictures toolbar may appear as a floating toolbar on your page, or it may be docked at the bottom or top of your screen.
    If the Pictures toolbar does not appear, from the View menu, select Toolbars » Pictures
    Pictures toolbar

  2. On the Pictures toolbar, click TEXTText button
    A rectangle-shaped text box appears.

  3. In the text box, type the desired text for the hotspot
    HINTS:
    To wrap the text, resize the text box by clicking and dragging one of the handles.
    To move the text box, click and drag the text box to the desired position.

  4. Double click the text box
    The Insert Hyperlink dialog box appears.
    Insert Hyperlink dialog box

  5. In the Address text box, type the desired URL for the hotspot link

  6. Click OK
    The text hotspot is created.
    HINTS:
    To move the entire text box, click and drag the text box to the desired location.
    To remove the text box, when the sizing handles are present, press [Delete].

Excellence. Our Measure. Our Motto. Our Goal.