You are here: A Guided Tour of Doc-To-Help > Using HTML Source Documents > Adding Image Maps

Adding Image Maps

Image maps allow you to define areas within images and use each area as a hyperlink. They are more effective than menus when the options can be presented logically in an image.

For example, in our sample help project, an image map would be ideal to let the user explore the different types of diving equipment by clicking the image of a diver.

If you are creating your help content with Microsoft Word, you can create image maps using the Image Map Editor provided with Doc-to-Help. For more information, see Using the Image Map Editor in Microsoft Word.

If you are using HTML, you can draw a hot spot and then use D2HML to create the link.

Follow the steps below to add an image map to our sample project (we are using Microsoft FrontPage, the steps will be slightly different with other editors).

1.   Open the Equipment document.

2.   Move the cursor to the end of the first topic and add a new empty paragraph.

3.   Select the Insert | Picture | From File menu and insert the Equipment.png file from the C:\Program Files\ComponentOne\DocToHelp\Tutorial\ScubaDive\HTMLDocuments folder.

4.   Select View | Toolbars | Pictures to make sure the Pictures toolbar is visible in FrontPage.

5.   Select the image, click the Polygonal Hotspot button and draw an area around the diver's fins (see picture below). When you close the polygon, the Insert Hyperlink dialog box appears.

6.   Enter Fins in the Address text box and click the ScreenTip button to enter a tooltip. Then click OK to close the dialog boxes.

7.   Repeat this process and add hotspots around the mask, wetsuit, and dive computer on the diver's wrist (see picture below). Enter the following, corresponding names for each in the Address text box:

      Mask

      Wetsuit

      Dive Computer

8.   Select the Fins hot spot and click the Jump Link button  on the D2HML Styles toolbar. The Links in a Picture with Area Hotspots dialog box appears.

9.   Select Fins in the Hyperlink column and click Create Area Hotspot. The Topic Link D2HML dialog box appears.

10.  Click the Browse button and select Fins in the Select Topic dialog box.

11.  Click OK to close the Select Topic and Topic Link dialog boxes.

12.  Create an area hotspot for all of the hot spots in the Hyperlink column and link to the following, corresponding topics:

      Masks

      Exposure Protection Suits

      Dive Computers

13.  Click OK to close the Links in a Picture with Area Hotspots dialog box.

14.  Close the editor and rebuild the help file to test the image map. Moving the mouse over the image will show tooltips, if you provided them, and clicking the hotspots will take you directly to the topic with tips about each type of equipment.