InDesign: Creating a hyperlink to a specific place on a web page, possible?

[dianel15448970]

I have an InDesign file with hyperlinks. But some of the hyperlinks that are to a url I would like to jump to a specific place on the web page when it is clicked/opened. Is this even possible? I have spent countless hours searching but all I get is "how to hyperlink to a url", which I can already do. Thanks in advance!

[JonathanArias]

as in you want the browser window to automatically scroll to a section on the page? if so, no

[Bill Silbert]

This can't be done through InDesign. I don't even imagine that it could be scripted simply because every web site has a different construction in regard to number of pages and overall height that it can be scrolled to, etc. Since no two web sites are the same I can't imagine a "one size fits all" way to do it.

[fenjas29325284]

It's possible - but only if you also have access to the destination website and are allowed to edit the code there (or the owner is willing to do it).

Example:

a) Web page, the headline code for chapter 2 gets an anchor tag:

<h1 id="ch2"> Chapter 2 </h1>

b) InDesign, the link for this spot jumps to this anchor:

https://www.examplesite.com/demo.html#ch2


Fenja

[Bill Silbert]

Definately not a “one size fits all” solution.

[Bill Silbert]

Despite what I’ve already written about this a workaround for it just occurred to me. Try going to the page on the web site you want as your target and copy it’s specific URL to the pasteboard. Make sure that your browser preferences are set to display the complete URL for the page. Then paste that URL into the destination field in the InDesign hyperlinks panel while your designated for hyperlink shape or text is selected. Hopefully, using this version of the URL will take you where you want to go. I’m not on my computer right now so I can’t test this for you so let me know if it works.

[Jongware]

Bill, if your method works it can do so because of the only supported way to navigate into a web page: an explicit id="#name" attribute in a HTML tag somewhere near the top of the screen. There are no other ways to navigate; HTML just does not support any other variants, such as a 'page/x/y location' as PDF does.

Ah – just thought of a way to show you. This very forum is chockful of id's; the entire page itself has one, but also the question and each of the separate answers (not one, but several). If your browser shows what id element is currently at the top, then you can use that. Mine doesn't, and so I needed to dip into the HTML source code to find out you can navigate to your answer by clicking here.

[Bill Silbert]

I actually just got a chance to test my theory and it does work. I chose a specific search result on Amazon and copied its specific URL into the URL field in the hyperlinks panel in InDesign while I had a single word of text selected with the text tool. I then made a pdf with hyperlinks included. In the pdf I clicked on the word and it launched my browser and went right to the previously searched page. As a simple workaround this is a quick and easy way to accomplish what has been here requested. I am not a coder and would not try to explain why it works—what matters, I think, is that it does.

EDIT: I just clicked on Jongware's link (which wasn't there when I was writing the original section of this post) and do see that it is more specific than the solution that I am proposing. Mine will work to get somebody to a specific page within a web site though not to the actual line of copy being looked for. It would depend on exactly what the user's final objective is though.

[dianel15448970]

This is great information! It is an internal document linking to an internal web page so I will get the keeper of the site to help me with this. Thank you so much!

[fenjas29325284]

dianel15448970​

I'm glad to hear that. Please note:

There's no space between the URL and the anchor.

The forum didn't let me write the code only.

...demo.html#ch2

Fenja

[Bevi Chagnon - PubCom.com · Accepted solution]

It's possible - but only if you also have access to the destination website and are allowed to edit the code there (or the owner is willing to do it)

Yes, it's possible, but you do not need access to the webpage's code to edit it.

You also don't need permission to link to anyone's webpage, unless you're doing it for nefarious reasons. If it's just a reference, that's allowable.

The problem is knowing how the webpage was coded and what and where the ID is for the region you want to link to. That is, IF there is an ID for it on the page.

Most webpages today define regions of the page with IDs that can be on various elements of a webpage, such as DIV, H1, and other heading tags. But older websites or those designed by amateurs might not have the IDs for you to link to.

How to:

View the sourcecode of the webpage in your browser. This is usually accessed from the options or controls for your particular browser.

All webpages begin with a <HEAD> section. Skip over it to the <BODY> section where all the content is contained.

Scroll down to the area you want to link to (this might be hundreds of lines down). See if the area has id="something" just before the area or at the beginning of the line of text. That's the ID.

Example:

For a fictitious website called www.OurCompany.com, it could look like this:

<H1>Welcome to our company</H1>

      <P>Blady blah blah blah.</P>

      <H2 id="aboutus">About our company</H2>

          <P>We are great.</P>

See if you can spot an id="x" somewhere. It might also be on a DIV tag, <DIV id="productssection">

Take the words between the quote marks and put that into InDesign's hyperlink section. In this example it would look like:

     http://www.ourcompany.com#aboutus

Note the hashtag # between the real URL and the ID portion. No spaces, no punctuation.

Good luck.

Understand that the website's owner can always change their code so this link might become out of date in the future.

[dianel15448970]

I sat with the web guy this morning and he showed me how he set up his page. I got the tag names, and we did a test and it worked beautifully. Thank you everyone for so kindly taking the time to answer my question. As a graphic designer, I have taken code classes over the years but it had been awhile and I was very rusty. Thank you again!