DOM Anchor Hover attribute

Discussion in 'Javascript' started by skipc@valley.net, Aug 28, 2005.

  1. Guest

    I posted a recent message regarding navigating a table using arrow
    keys. I've got the code for the navigation working.

    My table contains rows of links (anchors). I can get to a specific link
    using the code for capturing a key. However, once I get to the link, I
    can focus(), for example... but what I really want is to activate the
    "hover" styles.

    I can fake the hover effect using javascript, but how do I do this and
    still allow the user to use the mouse to navigate the table???? I'm
    getting more and more confused. I'm wondering if it's even worth it...

    Here is a function where I loop through the table to get to the anchors
    in the first column. Once I get the anchor, is there a way to activate
    the hover effect???

    function getRows()
    {
    var table = document.getElementById('myTable');

    for ( var i = 0; i<table.rows.length ; i++ ) {
    var myAnchor = table.rows.getElementsByTagName("a");
    if ( myAnchor.length )
    {
    myAnchor[0].focus();
    return;
    }
    }
    }

    Any help would be most appreciated... Thanks. D
    , Aug 28, 2005
    #1
    1. Advertising

  2. wrote :
    > I posted a recent message regarding navigating a table using arrow
    > keys. I've got the code for the navigation working.


    Navigating through links can be easily achieved without CSS, without
    javascript. Just tab through them. In Opera 7+, just use q and a keys.
    Otherwise just use accesskey attribute accordingly. I insist to say that
    no css and no javascript is needed for all this.

    >
    > My table contains rows of links (anchors).


    So far, this definitely sounds like table design to me.

    I can get to a specific link
    > using the code for capturing a key. However, once I get to the link, I
    > can focus(), for example... but what I really want is to activate the
    > "hover" styles.


    then just code the :hover pseudo-class for links
    <style type="text/css">
    a:hover {background-color: silver; color: blue;}
    a:hover:visited {background-color: silver; color: purple;}
    </style>

    >
    > I can fake the hover effect using javascript, but how do I do this and
    > still allow the user to use the mouse to navigate the table????


    Impossible to answer you without knowing more about the page, code, etc.
    An url would help.

    I'm
    > getting more and more confused. I'm wondering if it's even worth it...
    >


    No url. <shrug>

    > Here is a function where I loop through the table to get to the anchors
    > in the first column. Once I get the anchor, is there a way to activate
    > the hover effect???
    >


    Your question is not clear. Do you want to activate the link? or do you
    want such link to have an hover effect? or a focus effect?

    > function getRows()
    > {
    > var table = document.getElementById('myTable');
    >
    > for ( var i = 0; i<table.rows.length ; i++ ) {
    > var myAnchor = table.rows.getElementsByTagName("a");
    > if ( myAnchor.length )
    > {
    > myAnchor[0].focus();
    > return;
    > }
    > }
    > }
    >


    Also, I doubt your code is really needed if all the links in the page
    are in that "myTable" table. Then, you'd only need to access the links
    array.

    > Any help would be most appreciated... Thanks. D
    >


    Posting an url would help answer several questions. For instance, you
    seem to make no difference between links and anchors.
    Also, you want your design to work for which browser and browser versions?

    Gérard
    --
    remove blah to email me
    Gérard Talbot, Aug 29, 2005
    #2
    1. Advertising

  3. RobG Guest

    wrote:
    > I posted a recent message regarding navigating a table using arrow
    > keys. I've got the code for the navigation working.
    >
    > My table contains rows of links (anchors). I can get to a specific link
    > using the code for capturing a key. However, once I get to the link, I
    > can focus(), for example... but what I really want is to activate the
    > "hover" styles.
    >
    > I can fake the hover effect using javascript, but how do I do this and
    > still allow the user to use the mouse to navigate the table???? I'm
    > getting more and more confused. I'm wondering if it's even worth it...
    >
    > Here is a function where I loop through the table to get to the anchors
    > in the first column. Once I get the anchor, is there a way to activate
    > the hover effect???


    I think your only option is use script to remove all styles applied by
    a:hover etc. and replace them with classes. Then when you give the link
    focus, also change its class. When the focus moves on, restore the link
    to the 'non-focused' class.

    Using script to remove the styles in the first place means that users
    without JavaScript will still see your behaviour when using a pointing
    device.

    I guess it's worth mentioning that you can navigate through links with
    the tab key without any scripting - why not use that with the A's
    onfocus/onblur event? The issue with using the arrow keys is that they
    are used for other things already, like page scrolling and moving the
    insertion point inside textarea elements.

    Do you intend to disable those behaviours? When do the arrow keys move
    the 'link focus' and when not? By the time you sort all that out,
    you'll have a real mess I think.

    Try the example below:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Link focus</title>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">

    <style type="text/css">
    ..linkF {background-color: #eeeeff;}
    ..linkNF {background-color: #ffffff;}
    </style>

    <script type="text/JavaScript">

    function hoverMe( el ){
    while ( el.parentNode && 'tr' != el.nodeName.toLowerCase() ){
    el = el.parentNode;
    }
    if ( el.className ) {
    el.className = (el.className == 'linkF' )? 'linkNF':'linkF';
    }
    }

    </script>

    </head><body>

    <table border="1">
    <tr class="linkNF">
    <td><a href="http://intranet/ictplanning"
    onfocus="hoverMe(this);"
    onblur="hoverMe(this);"
    >ICT Planning</a></td>

    <td>Something about the link</td>
    </tr><tr class="linkNF">
    <td><a href="http://www-internal.qdot.qld.gov.au/"
    onfocus="hoverMe(this);"
    onblur="hoverMe(this);"
    >QT</a></td>

    <td>Something about the link</td>
    </tr>
    </table>

    </body>
    </html>


    --
    Rob
    RobG, Aug 29, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gabriel Lozano-Morán

    a:hover does not work without href attribute in <a> ?

    Gabriel Lozano-Morán, Apr 13, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    8,404
    =?Utf-8?B?R3JhaGFtIFVuZGVyd29vZA==?=
    Apr 22, 2005
  2. DC
    Replies:
    2
    Views:
    7,103
  3. InteXX
    Replies:
    3
    Views:
    821
    InteXX
    Oct 14, 2009
  4. bob bringas
    Replies:
    1
    Views:
    65
    bob bringas
    Mar 23, 2006
  5. Animesh K
    Replies:
    3
    Views:
    115
Loading...

Share This Page