SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Making a Photo link to another page

    How do I use a photo as a link to another page in my site?

  2. #2
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Let me add and say I want the photo to go to a specific area on another page.

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Basically, you do it the same why you do any other link. Insert the anchor in the page you're linking to, and do something like
    Code:
    <a href="page#anchor"><img src="path/to/image" width="xx" height="xx" alt="link to anchor"/></a>

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is what I used, but the link only goes to the top of the page, not down where I want it....


    <a href="Recipes.html#chili"><img src="images/Chili.jpg" width="80" height="80" align="right"></a>

    And this is on the page where I want it to land <h3 id="chili"></h3>

    It works fine when testing, but not when I upload?

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    I think you need to use an <a> for your anchor tag.
    Code:
    <h3><a id="chili">Anchor text</a></h3>

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No, you don't need to use an anchor element for the second. The ID of the fragment identifier on the H3 should work perfectly if correctly written... ID are case sensitive. So you need to get the case exactly the same for both.

    Try refreshing your page and I assume the H3 is somewhere other than near the top of the page called: Recipes.html so that you can see the browser position itself.

  7. #7
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys....finally got it. Actually think I forgot to refresh..... The older I get the stupider I get.

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    No, you don't need to use an anchor element for the second. The ID of the fragment identifier on the H3 should work perfectly if correctly written.
    Thank you for clarifying that. I've only ever needed to use that kind of anchor on one site, and it was so long ago I had to use the "name" attribute with it, so I'm pretty rusty on the subject.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    What's nice about using an anchor for the destination though is, keyboarders will have their focus down there too. Except in webkit (due to a nasty bug), the next Tab for the users will be whatever is focusable *after* the page fragment id. If you only use an id, the browser moves visually to the fragment, but the next Tab is from the last link clicked (in Barnum's case, the photo link).

    So sometimes I still add anchors. With id's. Webkit users are just SOL.

  10. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,411
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    Thanks Stomme poes, that's really useful to know. I'd like to believe that's the reason I used anchors on my site, but I think the real reason is that "HTML4 for Dummies" didn't mention just using ids. It was a long time ago.

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Last century in the time of Dinosaurous NN 4.xx was probably when the 'name' attribute was last needed to achieve such an effect nowadays it's ID for obvious reasons.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •