An image map, simply explained, is an “image with links.” Image maps are a great way to create shortcuts in your online Help that guide readers to relevant information.

For an example of an interactive image map, see the “Navigating Doc-To-Help” topic in Doc-To-Help’s online Help. Hover over the image, and a tooltip will tell you what you are pointing to, click the image, and you will be taken to the appropriate Help topic.

In a manual, the image will be static, but you can still single-source and use an image map; you just need to use conditions so that the appropriate information appears in each Target.

First, I’ll explain how to create an image map; then I’ll cover how you can use conditions to make both your online Help and manual convey the appropriate information.

Creating an image map

You can convert a simple static image into an interactive image map in 3 steps.

1. Select the image, then click the Image Map Editor button on the Doc-To-Help ribbon.
2. Click the Draw Hot Region button and select a section of the image.
3. Click the Set Hot Region Link button and link to any topic in the project. (It uses the same Link dialog box you use to create links within topics, so it is familiar.)

You can create image maps in any type of source document, Word, HTML, or XHTML. In the XHTML Editor, the Image Map Editor button is on the Insert ribbon.

Hint: click the Rename button to change the name of your links in the Image Map Editor. By default they will be Hot Region #1, #2, etc.

How to make your Image Map “work” when single sourcing

Your readers can click on an image map in online Help, but in a manual (pdf or printed) the image map will simply be an image. But, it is easy to provide the same information to those readers in a different way. You just need to apply conditions to your text.

Doc-To-Help has many built-in conditions, but two of them — Online Help and Printed Manual are all you need.

First, write your copy in the source document (Word in this example) and apply conditions to it.

• The “Click anywhere…” and the “To create an interactive graphic…” sentences are only needed in the online Help, so the Online Help condition is applied to them.
• The “See the topics below…” sentence is only for the manual, so the Printed Manual condition is applied to it.

To apply the conditions, simply select the text in your document and click the Conditional Text button on the Doc-To-Help ribbon. Choose the condition and click OK.

When you build your online Help, the topic will look like this:

And your manual will look like this:

That’s it — and don’t forget to check out the live sample I mentioned earlier: Live Image Map.

Have fun adding interactivity to your Help with image maps!