homepage Welcome to WebmasterWorld Guest from 54.227.34.0
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 / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
change a link style onclick
teelions

5+ Year Member



 
Msg#: 3338586 posted 12:27 pm on May 13, 2007 (gmt 0)

I don't know how to write a JS script from scratch but I need help in solving a problem. I need a style change done onClick. The site is made up of two frames: left column is the "menu", right is "content". I need the menu link to change style and add an image when clicked and stay that way until another link is clicked. After another link is clicked, the previously clicked link goes back to the default. Right now it's being doing just by styles using the a:active to change onclick and a:visited to return. The problem using styles 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 the form object gains focus, the menu arrow image disappears. Can someone help me?

Here's my code:

<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>

 

hansir

5+ Year Member



 
Msg#: 3338586 posted 4:08 pm on May 13, 2007 (gmt 0)

<style>
body{line-height:1em}
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:blue;
padding-left:5px;
background-position:left center;
background-repeat:no-repeat;
background:url(http://www.example.com/myblog/images/x_ico.gif) no-repeat left center;
text-indent:1em;
padding-right:0px;
font-style:italic;
cursor:default; /*Make mouse pointer an arrow to discourage clicking */
}

a.linked{
padding-left:5px;
background:url(http://www.example.com/myblog/images/x_ico.gif) no-repeat left center;
text-indent:1em;
cursor:default; /*Make mouse pointer an arrow to discourage clicking */
}

a.link1:hover {
padding-left:5px;
text-indent:1em;
color: blue;
background:#fff url(http://www.example.com/myblog/images/x_ico.gif) no-repeat left center;
text-decoration: none;
}

</style>
<a class="link1" href="#">Some Text</a><br />
<a class="link1" href="#">Some Text</a><br />
<a class="link1" href="#">Some Text</a><br />
<a class="link1" href="#">Some Text</a><br />

<script type="text/javascript">
var hrefs=document.getElementsByTagName("a");
var preA="";
for(var i=0;i<hrefs.length;i++){
hrefs[i].onclick=function(){
if(preA!="" && preA!=this){
preA.className="link1";
}
this.className="link1 linked";
preA=this;
}
}
</script>

[edited by: encyclo at 4:48 pm (utc) on May 13, 2007]
[edit reason] examplified, see terms of service [/edit]

teelions

5+ Year Member



 
Msg#: 3338586 posted 3:58 pm on May 14, 2007 (gmt 0)

Thanks this works but the arrow still disappears when focus is clicked off of the page. Can you code it to stick?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
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