469,344 Members | 5,548 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,344 developers. It's quick & easy.

Changing hyperlink color when clicked using JS

Hi,

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

Consider 3 links such as link1,link2,link3 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
Nov 27 '07 #1
10 19401
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!

Use style.color to set the text colour.

Post the code you have so far.
Nov 27 '07 #2
tj1
1
try this link:

http://www.goldcoastwebdesigns.com/c...nk-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

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. a:link {
  3. COLOR: #0000FF;
  4. }
  5. a:visited {
  6. COLOR: #800080;
  7. }
  8. a:hover {
  9. COLOR: #FF0000;
  10. }
  11. a:active {
  12. COLOR: #00FF00;
  13. }
  14. </style> 
  15.  

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

Expand|Select|Wrap|Line Numbers
  1. a:link {
  2. COLOR: #0000FF;
  3. }
  4. a:visited {
  5. COLOR: #800080;
  6. }
  7. a:hover {
  8. COLOR: #FF0000;
  9. }
  10. a:active {
  11. COLOR: #00FF00;
  12. }
  13.  
  14.  
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.goldcoastwebdesigns.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.goldcoastwebdesigns.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
Nov 28 '07 #3
acoder
16,027 Expert Mod 8TB
try this link:

http://www.goldcoastwebdesigns.com/c...nk-color.shtml

Hyperlinks and CSS
That's obviously using CSS, not JavaScript.
Nov 28 '07 #4
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..
Mar 22 '08 #5
acoder
16,027 Expert Mod 8TB
Post the code that you've tried, so we can see where the problem might be.
Mar 22 '08 #6
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled 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>

<!-- <a style="color: #800000" href="http://www.goldcoastwebdesigns.com/ase/" >Link Text</a>-->
</body>
</html>
[/HTML]
thanx
Mar 22 '08 #7
acoder
16,027 Expert Mod 8TB
That's just HTML/CSS. Where's the JavaScript?
Mar 22 '08 #8
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
Mar 25 '08 #9
hsriat
1,654 Expert 1GB
Hi,

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

Consider 3 links such as link1,link2,link3 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="......whatever...." onclick="changeColor(1)"></a>
<a id="link2" href="......whatever...." onclick="changeColor(2)"></a>
<a id="link3" href="......whatever...." onclick="changeColor(3)"></a>[/html]
Expand|Select|Wrap|Line Numbers
  1. function changeColor(s) {
  2.     for (var i=1; i<=3; i++) {
  3.     document.getElementById('link'+i).style.color = i==s ? 'red' :'blue';
  4. }
Mar 25 '08 #10
[html]<a id="link1" href="......whatever...." onclick="changeColor(1)"></a>
<a id="link2" href="......whatever...." onclick="changeColor(2)"></a>
<a id="link3" href="......whatever...." onclick="changeColor(3)"></a>[/html]
Expand|Select|Wrap|Line Numbers
  1. function changeColor(s) {
  2.     for (var i=1; i<=3; i++) {
  3.     document.getElementById('link'+i).style.color = i==s ? 'red' :'blue';
  4. }

hey,
thank you very much...
Now its working properly.
Mar 25 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by Leigh Kendall | last post: by
2 posts views Thread by Doug Stiers | last post: by
7 posts views Thread by G. Dean Blake | last post: by
1 post views Thread by mschoup | last post: by
1 post views Thread by Nathan Sokalski | last post: by
19 posts views Thread by Joe | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.