Welcome to WebmasterWorld Guest from 54.144.77.26

Forum Moderators: not2easy

Message Too Old, No Replies

change style of one link form click of another

     

teelions

3:49 pm on May 7, 2007 (gmt 0)

5+ Year Member



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

4:06 pm on May 7, 2007 (gmt 0)

5+ Year Member



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

9:08 pm on May 11, 2007 (gmt 0)

5+ Year Member



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?