How do I use a photo as a link to another page in my site?
| SitePoint Sponsor |
How do I use a photo as a link to another page in my site?
Let me add and say I want the photo to go to a specific area on another page.



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 likeCode:<a href="page#anchor"><img src="path/to/image" width="xx" height="xx" alt="link to anchor"/></a>
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?



I think you need to use an <a> for your anchor tag.Code:<h3><a id="chili">Anchor text</a></h3>


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.
};-) http://www.xhtmlcoder.com/
Thinking Web: Voices of the Community
> March 2013 - SitePoint forums: Spot the Error 3: Calling all Sleuths! Winner Announced!... She knows how to spot simple <code> errors but do you?
Thanks guys....finally got it. Actually think I forgot to refresh..... The older I get the stupider I get.






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.



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.
![]()


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.
};-) http://www.xhtmlcoder.com/
Thinking Web: Voices of the Community
> March 2013 - SitePoint forums: Spot the Error 3: Calling all Sleuths! Winner Announced!... She knows how to spot simple <code> errors but do you?
Bookmarks