Inserting Image Hyperlinks

After you insert an image, you can turn that picture into a hyperlink, connecting it to another topic, a topic in an imported HTML Help file, an external file (such as a website), or an email.After you insert an image, you can turn that picture into a hyperlink.

How to Insert an Image Hyperlink

1. Open the document or topic.
2. In the XML Editor, right-click the image that you want to use as a hyperlink.
3. In the context menu, select Hyperlink Image. The Insert Hyperlink dialog opens.

4. From the Link to drop-down field, select a way to identify the topic, bookmark, or file to which you want to link. Based on the option you choose, the section below gives you a list of selections or additional fields to complete.

   Place in This Document

   This option displays any bookmarks, headings, and other elements in the current file. Expand the appropriate section and select the element to which you want to link. If you select anything other than an existing bookmark, Contributor will insert a new bookmark at that destination in the file.

   External File 

   This option lets you search for a file (e.g., HTM, HTML, XML, PDF, Microsoft Office files) outside your file. After you select this option, enter the path to the file in the field next to the External File button.

   You can also click to display and select any bookmarks within the destination file, or if you have selected a PDF file.

   Note Because the link usually needs to be relative, based on the final locations of your output files, it is preferable to enter the text directly into the field, rather than clicking the External File button.

   Website

   This option lets you enter the path to an external file, such as the URL for a website. After you click this option, simply type the path in the field next to the Website field (e.g., http://www.acme.com).

   If you want to insert a variable in a field, you can click . The variable will appear as syntax in the field, but in the output the variable definition will be shown.

   Email 

   This option lets you add email addresses and subject line so that the user can quickly send an email. To add multiple email addresses, separate them with semi-colons.

   Example You might use this feature to help the end user send an email to your company's technical support department. When users click the link, it opens their email program and begins a new email message for them, inserting the email address and subject line for them. After you click this option, complete the E-mail address and Subject fields to the right (or select a recent email address from the list below).

   

5. (Optional) In the Screen Tip field, you can type a phrase that will appear when the end user hovers over the hyperlink in the output. This is added not only a "title" attribute, but as an "alt" (alternate text) attribute as well.
6. (Optional) In the Alternate Text field, type a phrase that describes what the element is about. This option should be used to increase accessibility for users who are unable to view an element. See Alt Text and Title Attributes.
7. (Optional) Next to the Style Class field, click the Select button. This opens the Select Class dialog, which lets you apply one of the defined hyperlink styles (a.NameOfStyleClass) from your stylesheet to the link. After you select a style class in the dialog, click OK. The Style Class field displays the selected style. (If you do not specify a style class, Contributor uses the parent "a" style.)

8. (Optional) In the Target Frame field, click the drop-down arrow to select the way the linked destination will open. This option can be used to open the destination topic or file in a popup.

   • Page Default The destination file opens in the same window as the output window.
   • Parent Frame The destination file opens in the parent frame of the current topic while hiding that topic.
   • New Window The destination file opens in a new browser window.
   • Same Frame The destination file opens in the same window frame as the current topic.
   • Top Frame The destination file opens in the same output window, removing all other framesets. You might use this option, for example, if the destination topic has its own frameset.
   • Popup Window The destination file opens in a popup box on top of the current topic.

9. (Optional) In the Tab Index field you can enter a value to specify the order in which users can tab through links. So when a user presses the TAB key the first time, the hyperlink with an index value of 1 will be selected first, the link with a value of 2 will be selected next, and so on. If you want to skip a link, enter -1 in that field.

10. Click OK. The hyperlink is added to the image in the topic. When a user hovers the cursor over the image in the output, the cursor changes to a hand.
11. Click to save your work.