changing the color of the active link

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

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

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/

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 (AT) wanadoo (DOT) fr> wrote

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...)

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/

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

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 !

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

Apologies if you receive a pointless post.

On Thu, 26 Aug 2004 12:01:28 +0200, Vincent Poinot
<vincent.use-my-last-name-here (AT) wanadoo (DOT) 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.