I have a 6 different contact details in a list that are separated by their respective categories on my contact.html page.
On another page I have 6 sets of photos of different people and features etc on about.html. Below each set I have a link that says "click here for contact details." This goes to contact.html.
I know on contacts.html I could add an area tag to jump to a certain part of the page, to a category if I clicked on a link at the top, for example.
But! Is it possible to click on a category's contact details link on about.html and it will go to the respective part of the page on contact.html ?
Any help on this matter would be much appreciated
First off, click here is really ugly and shouldn't really be used any more these days.
Secondly, you're referring to what's achievable with IDs:
<li id="msmith">M Smith ...</li>
<a href="contact.html#msmith">Contact details of M Smith</a>
I think I know what you're asking... it has nothing to do with <area> tags in this case.
An example. This page is long and made up of sections. If you go to the menu item at the top called "Verhuiswinkel" you'll see a dropdown with more choices. All those choices are the same page... they just use a url fragment to bring the visitor to that part of the page. Choose "rolcontainer" from the dropdown and you go to the section on Rolcontainers... and if you click on any particular rolcontainer, you go to a different page, but specifically to THAT container, not the top of the new page.
This is behaviour what you're talking about?? Then you want URL fragments.
So an example URL then would be
On the page called foo.html, you have an element with id="bar". This can be any element, but if it's an element who can receive focus, that's better, because some browsers won't move the cursor focus with the visual focus (so the next time the person hits "Tab" if they are keyboarding, they get dragged back up to where they last clicked something).
To jump to the element with "bar",
So there are about three popular ways to make #bar:
You can have the old-fashioned version:
This is a destination link, and the name can be used as a URL fragment. I don't use these because name was taken away from anchors and other elements in XHTML (not that I ever actually write in real XHTML, so I guess I'm just being a tard here).
You can use an id, which is nice in that it can go on ANY element (remember it must be unique per page though):
This brings the visual focus to that div. If the page is long enough, #bar will be at the top of the page. If the page is shorter than the height of the user's browser, though, you may not see any difference. Can't do anything about that.
The last way, and the way I often use, is a destination link with an id:
<div><a href="void" id="bar"> </a>
This brings both the visual AND the cursor focus to #bar. If the href of the anchor is something that doesn't actually exist (void or foo are examples), then any user who somehow manages to click on that anchor will not get thrown back to the top of the page, or brought anywhere else.
Safari is one browser who needs a focusable element to get cursor focus moved. Opera I believe is another one, however Opera is even more picky: the link can't be empty:
<a href="foo" id="bar"></a>
Opera wants something in it, for whatever reason. A literal space or a & # 160; (nonbreaking space) seems to do it, though.
I believe the href is mandatory in Strict doctypes, otherwise I'm putting it in there for no good reason.
Re area: You can also do clickable images using CSS image maps. Since the markup underneath is an ordinary list, this may give you more freedom.
There's another method using the :target pseudoclass, but I'm very unfamiliar with it because browser support used to be quite bad. They're better now, but someone else will have to explain it.
*edit c2uk ninja'd me : )
Thanks very much!
I have amended both errors, made the changes and learned for the future!
That's fine... it's what most developers do.
Just know a real keyboarder using Safari or Opera will still be tabbbing through all your links, not just the ones you send them to.
Firefox and IE seem to move cursor focus and visual focus together (which I think is nicer).
Thanks for your reply!
I used ID tags within the <H> Tags for each and this works very well.