DOM Anchor Hover attribute

[skipc@valley.net]

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.getEle mentById('myTab le');

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

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

[Gérard Talbot]

Re: DOM Anchor Hover attribute

skipc@valley.ne t wrote :[color=blue]
> I posted a recent message regarding navigating a table using arrow
> keys. I've got the code for the navigation working.[/color]

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.
[color=blue]
>
> My table contains rows of links (anchors).[/color]

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

I can get to a specific link[color=blue]
> 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.[/color]

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>
[color=blue]
>
> 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????[/color]

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

I'm[color=blue]
> getting more and more confused. I'm wondering if it's even worth it...
>[/color]

No url. <shrug>
[color=blue]
> 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???
>[/color]

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?
[color=blue]
> function getRows()
> {
> var table = document.getEle mentById('myTab le');
>
> for ( var i = 0; i<table.rows.le ngth ; i++ ) {
> var myAnchor = table.rows[i].getElementsByT agName("a");
> if ( myAnchor.length )
> {
> myAnchor[0].focus();
> return;
> }
> }
> }
>[/color]

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.
[color=blue]
> Any help would be most appreciated... Thanks. D
>[/color]

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

[RobG]

Re: DOM Anchor Hover attribute

skipc@valley.ne t wrote:[color=blue]
> 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???[/color]

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><ti tle>Link focus</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=IS O-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.toL owerCase() ){
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="hoverM e(this);"
onblur="hoverMe (this);"[color=blue]
>ICT Planning</a></td>[/color]
<td>Something about the link</td>
</tr><tr class="linkNF">
<td><a href="http://www-internal.qdot.q ld.gov.au/"
onfocus="hoverM e(this);"
onblur="hoverMe (this);"[color=blue]
>QT</a></td>[/color]
<td>Something about the link</td>
</tr>
</table>

</body>
</html>


--
Rob