homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
change style of one link form click of another
teelions




msg:3333018
 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




msg:3333029
 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




msg:3337462
 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