onfocus event for hyperlinks

[sybmathics]

Hi,

I'm developing a website where a visistor does not have to use the mouse.
All he has to do is use the Tab-key or key-combinations to jump to specific
hyperlinks (containing accesskeys).
Next, he presses the Enter key to follow the hyperlink.

My question is: is it possible to change color of the hyperlink when a
hyperlink get the focus.
I do not only want to see the dotted line, I want the hyperlink to lighten
up.

I hope you understand what I mean.

Any help is greatly appreciated.


Sybolt

 

[David Dorward]

My question is: is it possible to change color of the hyperlink when a
hyperlink get the focus.

a:link:focus {
color: #aaaaaa;
}

a:visited:focus {
color: #aaaa00;
}

.... requires a CSS 2 browser.

 

[sybmathics]

a:link:focus {

color: #aaaaaa;
}

a:visited:focus {
color: #aaaa00;
}

... requires a CSS 2 browser.

Does not seem to be working, David.
Should the hyperlinks be in a form?

Sybolt

 

[David Dorward]

Does not seem to be working, David.

Works perfectly here.
http://dorward.me.uk/tmp/link.png

Are you using a CSS 2 browser?

Should the hyperlinks be in a form?

Irrelevant (unless you have another selector of higher specifity involving
said form overriding the CSS I suggested)

 

[sybmathics]

Are you using a CSS 2 browser?

the latest Maxthon and IE 6

 

[sybmathics]

Works perfectly here.
http://dorward.me.uk/tmp/link.png

could you also create png of the source?

 

[David Dorward]

the latest Maxthon and IE 6

Maxthon is, IIRC, a wrapper about the IE 6 rendering engine.

IE 6 is not a CSS 2 browser.

 

[David Dorward]

could you also create png of the source?

The URL to the source is visible in the image.

 

[sybmathics]

The URL to the source is visible in the image.

OK David,

I got the message.

It would be a nice idea to show people where they are on the site by
lightening up the hyperlink.
But I guess it's just too soon.

What percentage of surfers use css2 browsers? Do you have any idea?

Could there be another way of showing (beside the dotted line around the
hyperlink) people where they are, when they are using a css1 browser? Maybe,
by using Javascript?
But, you know, I really don't like that language.

g\Greets,

Sybolt

 

[David Dorward]

What percentage of surfers use css2 browsers? Do you have any idea?

Its pretty much every current graphical browser except IE. The proportion of
users varies from site to site.

I hear IE7 will include support for CSS 2 selectors, so it might start
working there.

Could there be another way of showing (beside the dotted line around the
hyperlink) people where they are, when they are using a css1 browser?
Maybe, by using Javascript?

You could simulate it with the onfocus and onblur event handlers, setting
this.className or this.style.backgroundColor. There are probably packages
out there (the badly named IE7 JavaScript for example) that can process the
stylesheet and simulate support for the :focus pseudo-class.

But, you know, I really don't like that language.

This really is the right place to announce that!

 

[BootNic]

"David Dorward" <[email protected]>

Could there be another way of showing (beside the dotted line around
the hyperlink) people where they are, when they are using a css1
browser?

<style>
a:active{
background-color: lime;
}
a:focus{
background-color: lime;
}
</style>

 

[Thomas 'PointedEars' Lahn]

<style>
a:active{
background-color: lime;
}
a:focus{
background-color: lime;
}
</style>

No.

<OT>

1. The `type' attribute and value are missing for the `style' element:
<http://validator.w3.org/>

2. This affects all `a' elements, not only links.
Use a:link (and a:visited) instead.

3. Always specify background *and* foreground color:
<http://www.w3.org/QA/Tips/color>

</OT>


PointedEars