How create anchor links in images?

  • Resolved NGOcomms

    (@ngocomms)


    10 years ago

    Hi all,

    I’m creating a quite fact-heavy page and at the top I have 7 different illustrations/images that each relates to one different segment of information further below. To increase the page’s user friendliness, I would like to create a jump link within each image. So if I click, say image 3, I insta-jump to chapter 3 further down the same page.

    I know how to create html jump links within text, but I’ve been pulling the little hair I have left over this one problem. Tried googling and searching the forum, and sure enough there is a couple of answers out there, but a lot of the info is dated at least 5 years back and I get can’t get it to work.

    Would be immensely thankful if someone could help me with this.

    https://guide.chemsec.org/find/get-familiar-with-your-textile-production-processes/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Brian

    (@briansteeleca)

    It works the same way with images as it does with text – you’ll just be assigning the link to an image rather than to text.

    In the Visual editor, select the image that you want to attach the link to, and then click on the Insert/edit link icon.

    In the Enter the destination URL > URL field, add the ID of the topic you want to link to. (Don’t worry if the ID doesn’t exist yet, we’ll add it in the next step. Just be sure to give it a descriptive name.) For example:

    URL #fabric

    Next, you’ll have to add the #fabric ID to the section that you want to jump to. Go into the Text tab of the editor, find the title that you want to link to, and add the ID:

    <h5 id="#fabric"><span style="text-decoration: underline;">Step 3: Fabric production</span></h5>

    Here’s some more information on WordPress.com.

    Thread Starter NGOcomms

    (@ngocomms)

    Hi Brian,

    Thank you very much for trying to tackle this, but… I still can’t get it to work. I don’t know what part I’m missing.

    I followed your instructions: Go into visual and click edit image. From there I enter
    https://guide.chemsec.org/find/get-familiar-with-your-textile-production-processes/#fibre
    in the image link box (the same URL of both the image and the text I want to jump link to).

    I then switch to text editor and enter:
    <h5 id=”#fibre”><span style=”text-decoration: underline;”>Step 1: Fibre production</span></h5>

    Doesn’t work though. The image is clickable alright, I see the URL#fibre in the bottom of the browser when I mouse-over, but when I click the image nothing happens.

    Am I missing something?

    martcol

    (@hotmale)

    Try without the # in the h5 id attribute.

    <h5 id="fibre">

    Thread Starter NGOcomms

    (@ngocomms)

    That did it! Thank you both so much.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How create anchor links in images?’ is closed to new replies.