Creating and using hot spots (book excerpt)

Applies to
Microsoft Office FrontPage® 2003
Book cover This article was excerpted from Microsoft® Office FrontPage® 2003 Inside Out by Jim Buyens. Visit Microsoft Learning to buy this book. View other articles written by Jim Buyens.

This is the fifth in a sequence of five articles excerpted from Chapter 11, "Building Hyperlinks."

ShowSee links to all articles in this sequence

In this article

Adding hot spots

Modifying hot spots

Hot spot considerations

Adding hot spots

Hot spots provide another form of hyperlinking — one that assigns different URLs to different parts of a picture. Another name for hot spots is image map areas. The most common uses for hot spots are in menu bars and maps; however, you can use hot spots for any application that requires jumping to different locations depending on which part of a picture the Web visitor clicks.

Here's how to add hot spots to a picture in Microsoft Office FrontPage 2003:

  1. Open the Web page that contains the picture, and click the picture once to select it.

If the Pictures toolbar is not displayed, right-click the image, and then click Show Pictures Toolbar.

  1. Click the Rectangular Hotspot Button image, Circular Hotspot Button image, or Polygonal Hotspot Button image  button on the Pictures toolbar.
  2. When using the Rectangular Hotspot Button image  or Circular Hotspot Button image  tool, drag the mouse pointer over the portion of the picture that should define the hot spot. When using the Polygonal Hotspot  tool, draw a polygon by clicking the mouse pointer at each corner of the shape you want. To close the polygon, double-click the next-to-last point; FrontPage draws the final line to the starting point.
  3. When dragging is complete, FrontPage opens the Insert Hyperlink dialog box, the same dialog box you would use for setting up ordinary hyperlinks. Define the hyperlink as explained in the "Linking to an existing file or Web page" section in the third article in this sequence, Creating hyperlinks with menus.
  4. Repeat steps 2, 3, and 4 to define additional hot spots for the same picture.
  5. To define a hot spot for the picture as a whole, click any portion that's not already a hot spot, and specify its URL in the usual way.

When you select a picture that has hot spots, FrontPage displays the clickable areas, as shown in the following illustration of a single picture with eight hot spots.

Hot spot picture with clickable areas displayed

Top of Page Top of Page

Modifying hot spots

Here's how to perform some common operations on existing hot spots:

  • If the picture's hot spots are difficult to see, click the Highlight Hotspots button on the Pictures toolbar. This toggles the picture to a solid white background.
  • To modify a hot spot area, click it once, and then drag the side or corner handles.
  • To modify a hot spot hyperlink, double-click the hot spot area, or right-click it and then click Picture Hotspot Properties.

Top of Page Top of Page

Hot spot considerations

Following are a couple of things to think about when adding hot spots to your Web page design:

  • Provide visual clues for hot spots     A frequent criticism of hot spots — and of picture hyperlinks in general — is the lack of visual clues they provide. Visitors are reduced to moving the mouse pointer over a picture and watching for the pointer to indicate a hyperlink, or to clicking pictures at random to discover what they do. And if the picture you're hyperlinking lacks obvious visual clues, be sure to provide instructions in the surrounding text.
  • Provide alternate navigation     Early implementations of hot spots transmitted the x and y coordinates that the Web visitor clicked to a program on the Web server. That program read an image map file, determined which area the Web visitor clicked, identified the corresponding jump location, and sent that information back to the browser. The browser would then request the resulting page. Newer browsers can translate hot spot clicks to hyperlink locations by using image maps coded into the HTML. This is a much cleaner and more efficient approach than server-side image maps, and is now the only approach that FrontPage supports.

However, lack of server-side image map processing means that hot spots created in FrontPage won't work in certain very early browsers. Also, hot spots are not useful for visually impaired visitors, and visitors without visual impairment frequently overlook them. These are all good reasons not to rely exclusively on hot spots for navigation through your Web site.

Top of Page Top of Page

This is the final article in this sequence

About the author     Jim Buyens is a FrontPage, Web programming, and networking expert who has written several books, including Microsoft® FrontPage® Version 2002 Inside Out, Web Database Development Step by Step .NET Edition, Faster Smarter Beginning Programming, and Microsoft® Windows® SharePoint® Services Inside Out, all from Microsoft Press. Jim is a Microsoft Most Valuable Professional (MVP) who contributes extensively to the Microsoft FrontPage online communities. He currently develops Web-based business systems for the telecommunications industry.

 
 
Applies to:
FrontPage 2003