Image maps in Author-it v5

January 10, 2008

One of the other Author-it consultants created a video tutorial on how to create a clickable image map in Author-it version 4.x: http://www.pdaservices.co.uk/demo/im/imagemap.html

Here’s how to create image maps in Author-it v5:

Do these steps outside Author-it:

  1. Create the graphic.
  2. Use image mapping software to open the graphic and map the clickable hotspots on the graphic. [NOTE: Some graphics editors—such as PaintShop Pro—and some HTML editors—such as Dreamweaver—have image mapping capabilities, as do other applications such as MindManager. Check the applications you already have for this capability before purchasing or installing another application.]
  3. Save the modified graphic (e.g. xyz.png) and the associated HTML file (e.g. xyz.htm).

In Author-it:

  1. Create a new HTML Code file object, based on the Linked HTML Code File Template (Author tab > Create command group > File drop-down arrow).
  2. Give it a Description (e.g. ‘XYZ – image map’).
  3. On the Web tab, navigate to and select the Directory where you saved the HTML file you created in step 3 above.
  4. In the File Name field, click the browse button and select the HTML file from the directory (e.g. xyz.htm).
  5. Click the Linked HTML sub tab.
  6. Click the [>>] button next to the Specify any additional file required field.
  7. On the Paths window, click Add.
  8. Navigate to and select the graphic (e.g. xyz.png).
  9. Click OK to close the Paths window.
  10. Click OK to close the file object window.
  11. Now that you’ve created the file object, you can drag and drop it in to any Author-it topic.

NOTE: File objects like this only work in Web outputs, not Print.

One comment

  1. Hello,

    I was wondering this morning how to implement image maps, googled for a procedure and found your blog : thanks a bunch!

    So I created an image map linked to anchors within one single topic and used the Linked HTML Code File Template to create the anchors.

    Everything worked just fine when generating a XHTML help. But for some reason when generating a .CHM help, clicking on the image map opens the topic of the .CHM at the right position but in a web browser.

    Do you have any idea on how to make this right ?
    Thanks in advance for your help.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: