change style of one link form click of another

[teelions]

I would like a link style to change back to it's original state when another link is clicked. Currently the link starts in a default state of color: yellow and text-style: normal. Clicking on it changes to color:white and text-style:italics slightly indented with a arrow image pointing to it. It stays that way to show the user the page they are on. When another link is clicked then, I want the previous link clicked to return to it's default state. I'm using a 2-column frameset with the menu on left. How do I make this happen?

Here's my code so far:

<a onmouseover = "this.className='menuHover'"; onClick = "this.className='menuClicked' "; href=http://www.example.com target="myFrame"> Some Text</a>

<style>
.menuStart{
margin: 1;
display: block;
width: 200px;
color: yellow;
background-color: #0033ff;
text-decoration: none;
font-size:.95em;
}

menuHover {
color: blue;
background-color: #fff;
text-decoration: none;
}

.menuClicked{
color:white;
margin-left:2px;
background-position:left center;
background-repeat:no-repeat;
background-image:url(../_images/url_arrow.gif);
text-indent:1em;
padding-right:0px;
font-style:italic;
cursor:default; /*Make mouse pointer an arrow to discourage clicking */
}
</style>

[edited by: SuzyUK at 9:12 pm (utc) on May 11, 2007]
[edit reason] please use example.com [/edit]

[sgietz]

Why use JavaScript?

Try this:

<a class="link1" href="http://www.example.com" target="myFrame">Some Text</a>

<style>
a.link1:link {
margin: 1;
display: block;
width: 200px;
color: yellow;
background-color: #0033ff;
text-decoration: none;
font-size:.95em;
}

a.link1:visited {
margin: 1;
display: block;
width: 200px;
color: yellow;
background-color: #0033ff;
text-decoration: none;
font-size:.95em;
}

a.link1:active{
color:white;
margin-left:2px;
background-position:left center;
background-repeat:no-repeat;
background-image:url(../_images/url_arrow.gif);
text-indent:1em;
padding-right:0px;
font-style:italic;
cursor:default; /*Make mouse pointer an arrow to discourage clicking */
}

a.link1:hover {
color: blue;
background-color: #fff;
text-decoration: none;
}

</style>

[edited by: SuzyUK at 9:13 pm (utc) on May 11, 2007]
[edit reason] please use example.com [/edit]

[teelions]

Thanks. That is certainly an easier method! The only problem is that when the frame with the menu (the "menu" frame) loses focus, the arrow image disappears. For instance, there is a form on one page (in the "content frame"). When a form object gains focus, the menu arrow image disappears. Can this be fixed?