changing link colour on mouse click

**mumford1** · Nov 25, 2002 09:20

Hi

I have a frameset top, left, and main. In the left frame is the navigation made up of text links (css), what i want to happen is when a user clicks on one of those links i want it to stay a certain colour until they click on another link.

a:active is not good enough as when you click anywhere on the page the link colour turns off.

any ideas?

thanks for any help

**dale_burrell** · Nov 25, 2002 10:59

**mumford1** · Nov 25, 2002 12:00

thanks for the response

what you gave me works great, but i also need the colour to change back to default when the user clicks on another link

any ideas?

thanks again

**dale_burrell** · Nov 26, 2002 03:48

Something like this should do the job:

<script>
function ChangeColour(ThisLink)
{
var link1 = document.getElementById("Link1");
var link2 = document.getElementById("Link2");
var link3 = document.getElementById("Link3");
var link4 = document.getElementById("Link4");

var Curlink = document.getElementById(ThisLink.id);

link1.style.color = "Green";
link2.style.color = "Green";
link3.style.color = "Green";
link4.style.color = "Green";

Curlink.style.color = "Red";
}
</script>
</head>
<body>
<a id="Link1" href="" onclick="ChangeColour(this); return true;">Blah</a>
<a id="Link2" href="" onclick="ChangeColour(this); return true;">Blah</a>
<a id="Link3" href="" onclick="ChangeColour(this); return true;">Blah</a>
<a id="Link4" href="" onclick="ChangeColour(this); return true;">Blah</a>

**mumford1** · Nov 26, 2002 05:06

thanks for the response

i tried it out but dosen;t seem to give the results i want.

At the moment all the text links are white and when you roll over them they turn blue, when the user clicks on one of those links i want them to stay blue until the user clicks on another link where that stays blue and the other link turns back to white

any ideas?

**dale_burrell** · Nov 26, 2002 05:14

Can you be a bit more specific as to what is and isn't working.

The code I suggested wasn't tested - it was just an idea to get you started - it should do something like what you want when working properly.

**mumford1** · Nov 26, 2002 05:29

i added the code but when you click on say the home link all the links turn green at once and when you click on another link they still stay green

i need them to turn back to white when another link has been clicked

**dale_burrell** · Nov 26, 2002 05:36

True

- you are supposed to change the colours I used to be the colours you want. Green and red are just examples. You need to replace that with white and blue.

**mumford1** · Nov 26, 2002 05:43

thanks for all your help..one problem still when you click on another link i want the previous link that was clicked to turn back to its default of white ?!?

**dale_burrell** · Nov 26, 2002 05:50

Thats what the function is trying to do, the logic is as follows:

- Set all links backs to default colour
- Set current link to new colour

If that doesn't help then post the real code so I can play with it.

**mumford1** · Nov 26, 2002 05:55

heres the code for the side navigation with your javascript at the top, i have not put any code into the a links

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<LINK rel="stylesheet" media="screen" href="app_stylesheet.css" type="text/css">
<script>
function ChangeColour(ThisLink)
{
var link1 = document.getElementById("Link1");
var link2 = document.getElementById("Link2");
var link3 = document.getElementById("Link3");
var link4 = document.getElementById("Link4");

var Curlink = document.getElementById(ThisLink.id);

link1.style.color = "Green";
link2.style.color = "Green";
link3.style.color = "Green";
link4.style.color = "Green";

Curlink.style.color = "red";
}</script>
</head>

<body>
<table width="213" height="367" border="0" cellspacing="0" cellpadding="10" background="images/bground.gif" style="background-repeat: no-repeat;">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top">
<a href="main.htm" target="mainFrame">Home</a>
<br><br class="smallbr">
<a target="mainFrame">Pet Reader</a>
<br><br class="smallbr">
<a href=".htm" target="mainFrame">Pet Insurance</a>
<br><br class="smallbr">
<a href=".htm" target="mainFrame">What is Pet-ID</a>
<br><br class="smallbr">
<a href=".htm" target="mainFrame">Brochure</a>
<br><br class="smallbr">
<a href=".htm" target="mainFrame">Members Area</a>
<br><br class="smallbr">
<a href=".htm" target="mainFrame">Other Applications</a>
<br><br class="smallbr">
<a href=".htm" target="mainFrame">Distributors</a>
</td>
</tr>
</table>
<table width="165" bgcolor="#012E89" height="100%">
<tr>
<td> </td>
</tr>
</table>

</body>
</html>

**mumford1** · Nov 26, 2002 05:56

sorry forgot that the link classes are from white to blue in my external stylesheet

thanks again for all your help

**dale_burrell** · Nov 26, 2002 06:40

Well when I made enabled the code (You didn't seem to be using it) it worked perfectly. The current link is red and all the others are white.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<LINK rel="stylesheet" media="screen" href="app_stylesheet.css" type="text/css">
<style>
a {background: Black; color:white}
</style>
<script>
function ChangeColour(ThisLink)
{
var link1 = document.getElementById("Link1");
var link2 = document.getElementById("Link2");
var link3 = document.getElementById("Link3");
var link4 = document.getElementById("Link4");
var link5 = document.getElementById("Link5");
var link6 = document.getElementById("Link6");
var link7 = document.getElementById("Link7");
var link8 = document.getElementById("Link8");

var Curlink = document.getElementById(ThisLink.id);

link1.style.color = "white";
link2.style.color = "white";
link3.style.color = "white";
link4.style.color = "white";
link5.style.color = "white";
link6.style.color = "white";
link7.style.color = "white";
link8.style.color = "white";

Curlink.style.color = "red";
}</script>
</head>

<body>
<table width="213" height="367" border="0" cellspacing="0" cellpadding="10" background="images/bground.gif" style="background-repeat: no-repeat;">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top">
<a id="Link1" href="main.htm" target="mainFrame" onClick="ChangeColour(this); return true">Home</a>
<br><br class="smallbr">
<a id="Link2" href=".html" target="mainFrame" onClick="ChangeColour(this); return true">Pet Reader</a>
<br><br class="smallbr">
<a id="Link3" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Pet Insurance</a>
<br><br class="smallbr">
<a id="Link4" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">What is Pet-ID</a>
<br><br class="smallbr">
<a id="Link5" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Brochure</a>
<br><br class="smallbr">
<a id="Link6" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Members Area</a>
<br><br class="smallbr">
<a id="Link7" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Other Applications</a>
<br><br class="smallbr">
<a id="Link8" href=".htm" target="mainFrame" onClick="ChangeColour(this); return true">Distributors</a>
</td>
</tr>
</table>
<table width="165" bgcolor="#012E89" height="100%">
<tr>
<td> </td>
</tr>
</table>

</body>
</html>

**mumford1** · Nov 26, 2002 06:54

great worked a treat!

thanks again

User Tag List

Thread: changing link colour on mouse click

Thread Tools

Display

changing link colour on mouse click

Bookmarks

Bookmarks

Posting Permissions