Making a Photo link to another page

HTML & CSS
1

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

2

Let me add and say I want the photo to go to a specific area on another page.

3

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

<a href="page#anchor"><img src="path/to/image" width="xx" height="xx" alt="link to anchor"/></a>
4

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

I think you need to use an <a> for your anchor tag.

<h3><a id="chili">Anchor text</a></h3>
6

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. :slight_smile:

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

Thanks guys…finally got it. Actually think I forgot to refresh… The older I get the stupider I get.

8

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. :lol:

9

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

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. :blush: It was a long time ago. :slight_smile:

11

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.