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
http://example.com/foo.html
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”,
http://example.com/foo.html#bar
So there are about three popular ways to make #bar:
You can have the old-fashioned version:
<a name=“bar”><a/>
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):
<div id=“bar”>
stuff…
</div>
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>
stuff…
</div>
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 : )
