SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about area tags

    Hi,

    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

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    on contact.html:

    HTML Code:
    <ul>
    <li id="msmith">M Smith ...</li>
    ...
    </ul>
    on about.html

    HTML Code:
    <a href="contact.html#msmith">Contact details of M Smith</a>
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much!

    I have amended both errors, made the changes and learned for the future!


  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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 : )

  5. #5
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply!

    I used ID tags within the <H> Tags for each and this works very well.


  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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).


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
  •