473,326 Members | 2,113 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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
Jul 20 '05 #1
6 15863
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
Jul 20 '05 #2
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/
Jul 20 '05 #3
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 <vi***************************@wanadoo.fr> wrote in message news:<cg**********@news-reader3.wanadoo.fr>...
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...)

Jul 20 '05 #4
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/
Jul 20 '05 #5
On Thu, 26 Aug 2004 12:01:28 +0200, Vincent Poinot
<vi***************************@wanadoo.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.
Jul 20 '05 #6
Apologies if you receive a pointless post.

On Thu, 26 Aug 2004 12:01:28 +0200, Vincent Poinot
<vi***************************@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.
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

36
by: Peter Brause | last post by:
Hello, my stylesheet shows different colors for visited, active and hovered links. It works fine in IE 6, but in Opera 7 the color for the active link (red background) is never shown. How to...
4
by: crhaynes | last post by:
I'm having trouble with my CSS. My links are black, my hover is orange and my active link is red. When I select a link it turns red but i does not retain that color when the selected page loads. ...
2
by: paulmac106 | last post by:
Hi, I have a menu control that has two Menu choices One is "View History Items" the second is "PDA" My problem is as you roll the mouse over the menu options, the second one works only...
1
beacon
by: beacon | last post by:
I'm looking to reset the visited link color once another link is selected. Also, once that link takes me to a particular page, I want the font-weight for that page to be bold to indicate that it's...
2
by: Garima12 | last post by:
There is htm page. In its body I am calling a class from stylesheet called TaskbarStyle(classname). Now I want to change the color of hyperlink in this page as well as their active link color. I am...
1
thatos
by: thatos | last post by:
Can you tell how can I change color of link witthout losing my background?
2
by: jkizmannRU09 | last post by:
I know how to adjust the look of visited links with a CSS stylesheet, but how would one create individual variations among a set of links? For example, say I have three links, all initially...
1
by: Sarah Hammond | last post by:
Hello There, I am using jquery Spry Sliding panels for a new site i am working on. I am looking to style similarly to this example in particular I am trying to find a way to give the navigation...
1
Fary4u
by: Fary4u | last post by:
using asp while condition how can i write perticular link as a selected value ? <a class="mainlevel" href="p.asp?strCat=<%= strcat%>"> <%= strcat %></a> using CSS style sheet
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.