Skip to main content
dianel15448970
dianel15448970
Participant
May 3, 2018
Answered

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

  • May 3, 2018
  • 4 replies
  • 3102 views

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!

This topic has been closed for replies.
Correct answer Bevi Chagnon - PubCom.com
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.

4 replies

Bevi Chagnon - PubCom.com
Bevi Chagnon - PubCom.comCorrect answer
Legend
May 3, 2018
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.

|&nbsp;&nbsp;&nbsp;&nbsp;Bevi Chagnon &nbsp;&nbsp;|&nbsp;&nbsp;Designer, Trainer, &amp; Technologist for Accessible Documents ||&nbsp;&nbsp;&nbsp;&nbsp;PubCom |&nbsp;&nbsp;&nbsp;&nbsp;Classes &amp; Books for Accessible InDesign, PDFs &amp; MS Office |
dianel15448970
dianel15448970Author
Participant
May 4, 2018

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!

    A
    Anonymous
    May 3, 2018

    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
    Community Expert
    Bill SilbertCommunity Expert
    Community Expert
    May 3, 2018

    Definately not a “one size fits all” solution.

    Bill Silbert
    Community Expert
    Bill SilbertCommunity Expert
    Community Expert
    May 3, 2018

    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.

    Bill Silbert
    Community Expert
    Bill SilbertCommunity Expert
    Community Expert
    May 3, 2018

    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.

    JonathanArias
    JonathanArias
    Legend
    May 3, 2018

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices