Stylesheets - changing the color of the active link

Author

changing the color of the active link

Carla

2004-08-26, 12:28 pm

hi people,

I have a little problem that I can't solve with css and i was
wondering if you could help me.

I have 4 links, I want that when I click/mouseover in the link 1, it
turns to a color a, then when I click/mouseover over the link 2, it
turns to a color b and the link 1 turns to the normal link color
again. (an so with the other links).
Is this possible with CSS?
cordially,
stromboli

David Dorward

2004-08-26, 12:28 pm

Carla wrote:

> I have 4 links, I want that when I click/mouseover in the link 1, it
> turns to a color a, then when I click/mouseover over the link 2, it
> turns to a color b and the link 1 turns to the normal link color
> again. (an so with the other links).
> Is this possible with CSS?

Not with CSS alone. You would need some process (ideally on the server or in
your preprocessor) that adds a class attribute (or some other identifying
feature) to indicate that the link points to the current page.

However, if you are going to go to that effort, you might as well remove the
<a> element (leaving its content behind) instead so as to avoid having
self-referencing links.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Vincent Poinot

2004-08-26, 12:28 pm

Carla wrote:
> I have 4 links, I want that when I click/mouseover in the link 1, it
> turns to a color a, then when I click/mouseover over the link 2, it
> turns to a color b and the link 1 turns to the normal link color
> again. (an so with the other links).

Well, basically a link can have four states according to CSS:
:link for non-visited links,
:visited, for... visited links,
:hover when the user is passing the mouse over it,
:active when the link is being selected (keyboard or mouse)

So if you have something like:
<a id="one" href="..."></a>
<a id="two" href="..."></a>

You could use the following CSS rules:
a#one:link, a#one:visited { color: blue ; }
a#one:hover { color: green ; }
a#one:active { color: red ; }

This way, your link will be blue in normal state, green when the mouse
passes over it, and red when the user presses the mouse button while on
it. It will turn back to blue when the user releases the button.
If this is what you want, do the same with your other links (with
appropriate colors...)

--
Want to spend holidays in France ? Check http://www.relinquiere.com/

Carla

2004-08-26, 12:28 pm

Merci Beaucoup Vincent! :)

But I have another thing, say I have all the links in the color 0,
when I do a mouseout over the link 1, I want it to pass to the color 1
and stay in that way even if I put the mouse away of the link.

When I do a mouseover over the link 2 i want the link 1 to change to
the color 0 (normal) and the link 2 to change to the color 2. And the
link 2 should stay in the color 2 when I put the mouse away
(onmouseout).
I tried to do it with this.style.color but it hasn't worked

best regards,
carla

Vincent Poinot <vincent.use-my-last-name-here@wanadoo.fr> wrote in message news:<cghk85$1tc$1@news-reader3.wanadoo.fr>...
> Carla wrote:
>
> Well, basically a link can have four states according to CSS:
> :link for non-visited links,
> :visited, for... visited links,
> :hover when the user is passing the mouse over it,
> :active when the link is being selected (keyboard or mouse)
>
> So if you have something like:
> <a id="one" href="..."></a>
> <a id="two" href="..."></a>
>
> You could use the following CSS rules:
> a#one:link, a#one:visited { color: blue ; }
> a#one:hover { color: green ; }
> a#one:active { color: red ; }
>
> This way, your link will be blue in normal state, green when the mouse
> passes over it, and red when the user presses the mouse button while on
> it. It will turn back to blue when the user releases the button.
> If this is what you want, do the same with your other links (with
> appropriate colors...)

Vincent Poinot

2004-08-26, 12:28 pm

Carla wrote:
> Merci Beaucoup Vincent! :)
>
> But I have another thing, say I have all the links in the color 0,
> when I do a mouseout over the link 1, I want it to pass to the color 1
> and stay in that way even if I put the mouse away of the link.
>
> When I do a mouseover over the link 2 i want the link 1 to change to
> the color 0 (normal) and the link 2 to change to the color 2. And the
> link 2 should stay in the color 2 when I put the mouse away
> (onmouseout).
> I tried to do it with this.style.color but it hasn't worked
>

I may be wrong, but I don't think this is possible in CSS (at least not
in CSS 2). So JavaScript could help here. With the following HTML:

<p>
<a href="" onmouseover="switchColors(this, 'green') ;">Link 1</a> some text
<a href="" onmouseover="switchColors(this, 'red') ;">Link 2</a> some text
<a href="" onmouseover="switchColors(this, 'yellow') ;">Link 3</a>
</p>

You could use this function:

function switchColors(element, color)
{
links=document.getElementsByTagName("a") ;
for (var i = 0 ; i < links.length ; i ++)
links.item(i).style.color = 'blue' ;

element.style.color=color ;
}

and this CSS rule to make sure that JavaScript will turn back to the
desired start color:
a:link, a:visited { color: blue ; }

I only tested this in Firefox.

Buena suerte !

--
Want to spend holidays in France ? Check http://www.relinquiere.com/

Michael Winter

2004-08-26, 12:28 pm

On Thu, 26 Aug 2004 12:01:28 +0200, Vincent Poinot
<vincent.use-my-last-name-here@wanadoo.fr> wrote:

> Carla wrote:
>
> I may be wrong, but I don't think this is possible in CSS (at least not
> in CSS 2). So JavaScript could help here. With the following HTML:
>
> <p>
> <a href="" onmouseover="switchColors(this, 'green') ;">Link 1</a> some
> text
> <a href="" onmouseover="switchColors(this, 'red') ;">Link 2</a> some text
> <a href="" onmouseover="switchColors(this, 'yellow') ;">Link 3</a>
> </p>
>
> You could use this function:
>
> function switchColors(element, color)
> {
> links=document.getElementsByTagName("a") ;
> for (var i = 0 ; i < links.length ; i ++)
> links.item(i).style.color = 'blue' ;
>
> element.style.color=color ;
> }
>
> and this CSS rule to make sure that JavaScript will turn back to the
> desired start color:
> a:link, a:visited { color: blue ; }
>
> I only tested this in Firefox.
>
> Buena suerte !
>
>

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Michael Winter

2004-08-26, 12:28 pm

Apologies if you receive a pointless post.

On Thu, 26 Aug 2004 12:01:28 +0200, Vincent Poinot
<vincent.use-my-last-name-here@wanadoo.fr> wrote:

[snip]

> function switchColors(element, color)
> {
> links=document.getElementsByTagName("a") ;
> for (var i = 0 ; i < links.length ; i ++)
> links.item(i).style.color = 'blue' ;
>
> element.style.color=color ;
> }

function switchColors(elem, col) {
var links = document.links, style;

for(var i = 0, n = links.length; i < n; ++i) {
if((style = links[i].style)) {style.color = 'blue';}
}
if(elem && (style = elem.style)) {style.color = color;}
}

If you want all A elements, rather than just those with a href attribute,
expand the first line to:

var links = [], s;

if(document.getElementsByTagName) {
links = document.getElementsByTagName('A');
} else if(document.all && document.all.tags) {
links = document.all.tags('A') || [];
}

Either of the above are less likely to cause an unnecessary error if the
W3C DOM is unsupported.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.