Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: open

Message Too Old, No Replies

change a link style onclick

     

teelions

12:27 pm on May 13, 2007 (gmt 0)

5+ Year Member



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

4:08 pm on May 13, 2007 (gmt 0)

5+ Year Member



<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

3:58 pm on May 14, 2007 (gmt 0)

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month