Changing hyperlink color when clicked using JS

**acoder** · Nov 27 '07, 12:10 PM

Welcome to TSDN!

Use style.color to set the text colour.

Post the code you have so far.

**tj1** · Nov 28 '07, 04:24 PM

try this link:

http://www.goldcoastwebdesigns.com/change-hyperlink-color.shtml

Hyperlinks and CSS
Some simple ways of changing link colors with CSS. Colors can can also be controled with HTML but this does not offer much flexibility.

Introduction
Here is a few ways to change and control the color of hyperlinks. Hyperlinks can be made to change colors by adding a style sheet to your HTML and editing the following Anchor Pseudo-classes:
Link: The color of an un-visited link.
Visited: The color of a visited link.
Active: The color of the link when it is clicked. The link will remain that color when users hit the Back Button after visiting the link destination.
Hover: The color of the link when the mouse hovers over it.

Change Hyperlink Color with Internal Style Sheet
Adding CSS to a HTML Document without Referencing an External Style Sheet
If you need to change colors on one page only, this code can be used. It can become a big job if you use this code to create many pages, then discover that you need to change the color again.

If you intend to build many web pages, it is suggested to create an external style sheet and link your HTML documents to that. This way, if you need to change colors again, all you have to do is change the values to just one file - the external style sheet, and changes will take effect across an unlimited number of pages.

Add the following CSS code into the head section of your HTML document: <head>code</head> and change the color values as required:

Code

[CODE=css]<style type="text/css">
a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}
</style>
[/CODE]
Change Hyperlink Color with External Style Sheet
Adding CSS to a HTML Document by Referencing an External Style Sheet
Using an external Style Sheet offers much more flexibility when changing the appearance of HTML documents because an entire web site with thousands of pages can be changed just by changing one single file.

Add the following CSS code to your style sheet and change the color values as required:

Code

[CODE=css]a:link {
COLOR: #0000FF;
}
a:visited {
COLOR: #800080;
}
a:hover {
COLOR: #FF0000;
}
a:active {
COLOR: #00FF00;
}

[/CODE]
Change Hyperlink Color with Inline Style Sheet
Adding the Style Attribute to an Anchor Tag
The Style attribute can be added to many HTML Tags. Below is an example of how to add the style attribute to an Anchor Tag in order to change the color of a hyperlink.

Add the following code to your HTML document and change the color values and URL as required:

Code

[HTML]<a style="color: #800000" href="http://www.goldcoastwe bdesigns.com/ase/" >Link Text</a>
[/HTML]
Output

Link Text

Notes

#800000 = Variable Value.
color = CSS Property.
More than one property can be added within the Style Attribute. Just place a semicolon (;) and a space after the last value like this:
Code

[HTML]<a style="color: #800000; text-decoration: none; background: #80FF80" href="http://www.goldcoastwe bdesigns.com/ase/" >Link Text</a>
[/HTML]
Output

Link Text

Notes

background Changes the background color of the hyperlink.
text-decoration The none value removes the underline.
Further Information

**acoder** · Nov 28 '07, 07:26 PM

Originally posted by tj1

try this link:

http://www.goldcoastwebdesigns.com/change-hyperlink-color.shtml

Hyperlinks and CSS

That's obviously using CSS, not JavaScript.

**heenakausar** · Mar 22 '08, 11:16 AM

hi,

Even am facing the same problem...
I tried out the solutuions given here...
but these work only in internet explorer but not in mozilla firefox..

**acoder** · Mar 22 '08, 12:09 PM

Post the code that you've tried, so we can see where the problem might be.

**heenakausar** · Mar 22 '08, 12:27 PM

Here is the code which i was trying just to check...
properly works in ie but not in mozilla firefox

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitl ed Document</title>
<style type="text/css">
a:link {
COLOR: #000000;
}
a:visited {
COLOR:#660000;
}
a:hover {
COLOR: #0000FF;
}
a:active {
COLOR: #669933;
}
</style>
</head>

<body>
<a href="#" >Heena's test</a>
<a href="#">Test1</a>
<a href="#">Test2</a>


</body>
</html>
[/HTML]
thanx

**acoder** · Mar 22 '08, 03:49 PM

That's just HTML/CSS. Where's the JavaScript?

**heenakausar** · Mar 25 '08, 06:19 AM

Originally posted by acoder

That's just HTML/CSS. Where's the JavaScript?

hi,
ya I know..I haven't written java script yet i was just trying it with html and css but it is not working...
can u please help..
and what should be the JS for the same.
thanx

**hsriat** · Mar 25 '08, 07:14 AM

Originally posted by arunsenthil

Hi,

Iam new to JS. Kindly help me to solve the following difficulty.

Consider 3 links such as link1,link2,lin k3 in gray color at top of the page. When each link is clicked the corresponding data should get displayed at the bottom of the same page and the currently selected link should change to orange.
Suppose if link1 is selected, the color of link1 should change to orange and other 2 link should remain in gray color. If onother link is clicked the corresponding link should change to orange and other 2 link should turn to gray. I was trying this with onclick event in JS. But i was not successful in that. Kindly suggest me how to solve this problem.

Kindly send the solutions to **** [removed email]

Regards,
Arun

[html]<a id="link1" href="......wha tever...." onclick="change Color(1)"></a>
<a id="link2" href="......wha tever...." onclick="change Color(2)"></a>
<a id="link3" href="......wha tever...." onclick="change Color(3)"></a>[/html]
[code=javascript]function changeColor(s) {
for (var i=1; i<=3; i++) {
document.getEle mentById('link' +i).style.color = i==s ? 'red' :'blue';
}[/code]

**heenakausar** · Mar 25 '08, 09:11 AM

Originally posted by hsriat

[html]<a id="link1" href="......wha tever...." onclick="change Color(1)"></a>
<a id="link2" href="......wha tever...." onclick="change Color(2)"></a>
<a id="link3" href="......wha tever...." onclick="change Color(3)"></a>[/html]
[code=javascript]function changeColor(s) {
for (var i=1; i<=3; i++) {
document.getEle mentById('link' +i).style.color = i==s ? 'red' :'blue';
}[/code]

hey,
thank you very much...
Now its working properly.

Changing hyperlink color when clicked using JS

Changing hyperlink color when clicked using JS

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment