Hyperlink overlays

Use the Buttons panel to create links to the first or last page of a document or to a different article.

1. In InDesign, create the object to be used as the button.

   For example, if you want the button to jump to a website, create a text frame or place an image.

2. Open the Buttons panel (Window > Interactive > Buttons), select the object, and click the Convert Object To Button icon.

3. For Event, choose On Release.

   On Release is the only supported button event.

4. Click the plus sign next to Action and select a supported action.

   

   Supported button actions

   A.

   Supported actions for hyperlink buttons

   B.

   Supported actions for slideshow buttons

   Supported hyperlink actions include Go To First Page, Go To Last Page, Go To URL, Sound, Video, and Go To Page. Go To Next State, Go To Previous State, and Go To State actions are supported for slideshows.

   Do not use the Go To Destination action to jump to a different article. Instead, use the Go To URL action with a “navto” format.

   All other actions—including Go To Next Page and Go To Previous Page—are currently not supported.

5. If desired, add additional button actions.

   Actions are played in sequence. For example, if the first action plays a video and the second action displays a different slide, the video plays, and then the slide is displayed.

In InDesign, you can use the Hyperlinks panel to add hyperlinks. Creating hyperlinks is especially useful for jumping to a web page, to a different article, and to a different page.

Hyperlinks are especially useful for text. If you want a frame to be a hyperlink, consider using the Buttons panel instead of the Hyperlinks panel. Buttons are more versatile and less likely to break.

1. Select the frame or text that you want to use as a hyperlink.

2. Open the Hyperlinks panel (Window > Interactive > Hyperlinks).

3. In the Hyperlinks panel, choose New Hyperlink from the panel menu.

4. Deselect Shared Destination.

   Shared Destination lets you name and reuse hyperlinks, but it’s better to avoid using this option in the DPS workflow.

5. In the Link To menu, specify any of the following options, and then click OK:

   URL

   Tapping a URL hyperlink displays a web page (http://), an App Store application (itms://), an Android Market application (market://), or a different article (navto://).

   Example: http://www.adobe.com

   When linking to websites, type the entire URL, including “http://.”

   Note: When linking to an iTunes URL, deselect Open in Folio in the Overlay Creator panel. Otherwise, a “Cannot Open Page” error message appears when the hyperlink is tapped. Similarly, if you use an itms:// or market:// format to link to a store app, turn off Open In Folio.

   A navto:// hyperlink jumps to a different article or a different page in that article. Type navto:// followed by the article name as it appears in the Folio Builder panel. Use the Article Name value, not the article’s Title value. If you want to include a page number, add # followed by a number. But keep in mind that the first page is 0, so adding #2 jumps to page 3.

   Example: navto://newsarticle

   Example: navto://newsarticle#2 (jumps to page 3)

   Email

   Tapping an Email hyperlink launches the Mail app with the To field filled in.

   Page

   Tapping a Page hyperlink jumps to a different page within the article. Do not use this option for jumping to a different article.

   The Text Anchor hyperlink is not supported.

6. To change hyperlink settings, select the hyperlink objects, and then specify these settings in the Overlay Creator panel (Window > Extensions > Overlay Creator):

   Open In Folio

   Display the content in a web view within the Viewer. Deselect this option when linking to iTunes, itms://, or market:// URLs.

   Open In Device Browser

   Display the content outside the Viewer in the mobile device browser, such as mobile Safari on the iPad. Select Ask First if you want a prompt to appear when users tap the link. This option is disabled if Open In Folio is selected.

   Note: The Overlay Creator panel settings are not available for text hyperlinks. You cannot change settings for text hyperlinks; they are set to Open In Folio by default.

For additional details on creating hyperlinks, see Create hyperlinks in InDesign CS5 Help.

Folio articles are stored on a server, so any link that specifies a path to an InDesign file is broken when previewed. Use the “navto” format to link to other articles.

When creating either a button or hyperlink, you can replace “http://” with “navto://” in the URL field. Then specify the target article name as it appears in the Folio Builder panel. Use the Article Name value, not the article’s Title value. Valid navto formats include navto://[articlename] and navto://[articlename]#n. Adding #n specifies a page number. The first page of a document is 0, so specifying #2 jumps to page 3.

Jumping to page 3 of a different article

Navto examples:

navto://biking

navto://biking#2 (jumps to page 3 of biking article)

When you create a URL-based hyperlink or button, you can use the “navto://” URL to jump to a different article. Navto is especially useful for jumping to HTML articles. You cannot use navto hyperlinks in Web Content overlays.

Jump to HTML article

Type navto:// followed by the HTML article name (not the article title).

Example: navto://newsarticle

Jump to anchor in HTML article

You cannot jump to a specific page within an HTML article, but you can jump to an anchor by typing navto://<foldername>#<anchor name>.

Example: navto://newsarticle#part4

Note: To define an anchor in an HTML file, open the HTML file in a text editor. Navigate to the text that you want to act as an anchor, and enclose the text with an anchor tag, such as “<a name="part4">This is Part 4 of the Article</a>.”

Jump to InDesign article from HTML article

Use the navto format to create a hyperlink from an HTML article to an InDesign article. Example:

<a href="navto://newsarticle">See the News Article</a>

You can also navigate to pages within an InDesign article by adding the page number after the document name. The first page of the document is 0, and the second page is 1, and so on. Example:

<a href="navto://Cycling#3">Go to Page 4 of the Cycling Article</a>

Jump from HTML to HTML

Use the navto format to jump from one HTML article to another using the folder name. Example:

<a href="navto://newsarticle">See the News Article</a>

You can create a hyperlink or button that displays a local HTML file or asset in the Viewer’s in-app browser.

1. Add a folder containing the local HTML file to the HTMLResources folder.

   Make sure that the HTMLResources folder is included in the folio. The HTMLResources folder can be added only from the Folio Producer on the web.

2. Use any of the following methods to display the HTML file in the in-app browser:

   InDesign source document

   In the URL field of either a hyperlink or button, enter the path without http://, navto://, or any other prefix. Example:

   HTMLResources/Cartoons/train1.html

   HTML article

   From an HTML article, specify the location. Example:

   <a href="../HTMLResources/Cartoons/train1">See Train Cartoon Gallery</a>

You can create a link that sends an email message (mailto:) or a text message (SMS). You can also create links that open the YouTube app or an iTunes song or album. To learn more about the required formats to use for the iPad, see the Apple URL Scheme Reference.

When users browse through a folio on the mobile device, the horizontal and vertical pages they see are rasterized images of each InDesign page. The page thumbnails that appear when the user taps the Browse button or uses the scrubber at the bottom of the mobile device are also rasterized images. You can control the appearance of the hyperlinks and slideshows in these rasterized images.

To control the appearance of hyperlinks and slideshows, create a config text file and save it in the InDesign application folder. This file, called NativeOverlays.config, lets you include or suppress native hyperlinks and slideshows.

1. Open a text editor.

2. Add one or more of the following lines.

   (“Asset” refers to the main pages, “Thumbnails” refers to the Browse icon images, and “Scrubbers” refers to images that appear when the user drags the scrubber.)

   SuppressOverlayTypesForAssets: <slideshow, hyperlink>

   SuppressOverlayTypesForThumbnails: <slideshow, hyperlink>

   SuppressOverlayTypesForScrubbers: <slideshow, hyperlink>

   ResetHyperlinksToTopState: <ThumbnailPass, ScrubberPass, AssetPass, All>

   ResetHyperlinksToTopState means that any button with a Go to URL action displays the [Normal] state instead of the [Click] state.

   ResetSlideshowsToTopState: < ThumbnailPass, ScrubberPass, AssetPass, All>

   ResetSlideshowsToTopState resets the multi-state object to the top state of the multi-state object in the InDesign document. If you suppress overlays, reset settings do not apply.

   If ResetHyperlinksToTopState and ResetSlideshowsToTopState are not specified, the default behavior is to reset to top states for both slideshows and hyperlinks.

   Example:

   SuppressOverlayTypesForAssets: slideshow 
   SuppressOverlayTypesForThumbnails: hyperlink 
   SuppressOverlayTypesForScrubbers: slideshow, -hyperlink 
   ResetHyperlinksToTopState: All 
   ResetSlideshowsToTopState: ThumbnailPass, ScrubberPass

   If you type a minus sign before the overlay type, that overlay type is not suppressed.

3. Save the file with the name, NativeOverlays.config.

4. Move the NativeOverlays.config file to the InDesign application folder using one of these methods:

   Windows

   Move the config file to the same level as the InDesign.exe file.

   Mac OS

   Select the Adobe InDesign CS5 application icon, right-click, and choose Show Package Contents. Move the config file to the Content > MacOS folder.