You can use the Hyperlinks panel or the Buttons panel to create links that jump to websites, other articles, and more. Not all button actions and hyperlink types are supported in folios.
Hyperlink overlays are supported in scrollable frames and slideshows, but not other overlays.
Use the Buttons panel to create links to the first or last page of a document or to a different article.
Supported hyperlink actions include Go To First Page, Go To Last Page, Go To Next Page, Go To Previous 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.
In InDesign, you can use the Hyperlinks panel to add hyperlinks. 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.
URL
Tapping a URL hyperlink displays a web page (http://), an App Store application (itms://), an Amazon Appstore application (amzn://), 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 Folio Overlays panel. Otherwise, a “Cannot Open Page” error message appears when the hyperlink is tapped. Similarly, if you use an itms:// or amzn:// 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)
To change hyperlink settings, select the hyperlink objects, and then specify these settings in the Folio Overlays panel:
Open In Folio
Display the content in a web view within the Viewer. Deselect this option when linking to iTunes, itms://, or amzn:// 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 Folio Overlays 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/CS5.5 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.
Note:
If you used a previous version of the tools to create a navto link using a folder name or article name that differs from the target article name, your links are broken. To fix the navto links, you can either rename the article (the name, not the title) or edit the navto links to point to the article name as it appears in the Folio Creator panel.
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 “This is Part 4 of the Article.”
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>
If you have an Enterprise DPS account, you can use the goto format to create links from articles to the HTML content associated with custom icons. For example, you can use the DPS App Builder to specify custom icons for “Store,” “Help,” and “Terms.” These buttons appear in the viewer library. To create a button in an article that opens the HTML content for any of these custom icons, use the following format:
goto://ApplicationViewState/[label]
For example, the goto://ApplicationViewState/Store button action would open the HTML store—just like tapping the custom Store icon in the library.
Use the DPS App Builder to create custom icons and specify labels. See Navigation Toolbar (Enterprise only).
You can also create buttons that go to the library, to the list of sections, or to the last view (Back button). Use these formats:
goto://ApplicationViewState/library
goto://ApplicationViewState/sections
goto://FolioNavigation/lastview
You can create a hyperlink or button that displays a local HTML, image, or PDF file in the viewer’s in-app browser.
Add a folder containing the local HTML file to the HTMLResources folder.
Make sure that the HTMLResources folder is included in the folio. See Import HTMLResources folder.
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>
Web Content overlay
Web Content overlays are nested two levels deeper than an HTML article. Example:
<a href=”../../../HTMLResources/Cartoons/train1”>See Train Cartoon Gallery</a>
Note:
For best results, avoid spaces and special characters in your HTML folders and files. If you include a space in a folder or file name, use the appropriate HTML code for the space character. For example, use “Cartoon%20Files” for a folder called “Cartoon Files.”
You can create a link that sends an email message (mailto:), a text message (SMS), or calls a number (tel:) from an iPhone article. 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.
For information about creating advanced email (mailto:) links, see James Lockman’s article Sending email and email attachments from DPS publications.
If you specify an Optional URL Scheme when using DPS App Builder to create an app, you can link to that app from another app or when viewed from a webpage in mobile Safari. See Viewer Details panel.
Note:
Whenever you create a link to an external app or service, select the button and choose the Open In Device Browser option in the Overlays panel.
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.
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
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
