homepage Welcome to WebmasterWorld Guest from 54.166.159.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
change style of one link form click of another
teelions

5+ Year Member



 
Msg#: 3333016 posted 3:49 pm on May 7, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3333016 posted 4:06 pm on May 7, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3333016 posted 9:08 pm on May 11, 2007 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved