Image maps in Author-it v5

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.

Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)

Use PaintShop Pro to create an Image Map

Need a clickable image map in a hurry? Already have PaintShop Pro? Then use PSP to create the map for you.

In PaintShop Pro X:

1. Open the image you want to make clickable.
2. Display the web toolbar (View > Toolbars > Web).
3. Click the Image Mapper icon .
4. Create the regions, and add the URL links.
5. Save the image and the associated HTML file, ready for use in your web pages.

Has this tip helped you? saved you time? saved your skin? You can thank me by clicking on the cup and buying me a coffee. (An E-Junkie shopping cart page will open where you can pay for my coffee via PayPal.)