Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Frame: changing link color for active page

Status
Not open for further replies.
Ben1637

Ben1637

Instructor
Nov 13, 2002
50
US
hi all...

I have a webpage that uses frames (I know, not neccesarily ideal), but I was hoping you might be able to provide some guidance. The frame is on the left side of the page and is used solely for navigation. When the links are clicked, the content appears on the right side of the page. I am currently using a CSS to create roll-over effects for each of the links in the left frame. Is there a way for the link to remain in an altered state after the user clicks on it, ultimately representing the active page displayed on the right? Right now, as soon as the user clicks in the main window (right frame), the link returns to its original state.

Any suggestions you might have would be greatly appreciated.

Many thanks, in advance!
 
Sort by date Sort by votes
In case it helps, this is part of the code I am currently using in the left frame:

a:link {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: blink;
color: #000099;
font-weight: bolder;
background-color: #66CCFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #3366FF;
font-weight: bolder;
}

a:visited:hover {
text-decoration: blink;
color: #000099;
font-weight: bolder;
background-color: #66CCFF;
}



So I guess I am wondering if there is a way to keep a link in hover state until another link is clicked in that particular frame, regardless of whether or not the user clicked out in the main frame?

Thanks again!
 
Upvote 0 Downvote
You may be able to use the code I gave earlier:
Code: 
<script>
<!--
onload = init;

function init() {
   for (j=0; j<document.links.length; j++) {
      if (window.location.pathname == "/" + document.links[j].id + ".htm") {
         document.links[j].style.color = "#000000";
         document.links[j].style.fontSize = "11px";
      }
   }
}
//-->
</script>


<a href="page1.htm" id="page1">Page 1</a>&nbsp;&nbsp;<a href="page2.htm" id="page2">Page 2</a>
This method requires that you have an ID for each link which is equal to the page that it displays. For example, if link 1 opens "test.htm", the id for link 1 must be "test".
 
Upvote 0 Downvote

Surely you would be better off not giving each link an ID, instead using its href property?

Code: 
if (window.location.pathname == document.links[j].href)

Dan
 
Upvote 0 Downvote
Thank you very much for your response! Unfortunately, however, I am having trouble. I am not very proficient with HTML - I can read it, but I struggle to write it. Logically, your code makes sense to me, but I can't really seem to implement it....can you please help?

Here is one of my hrefs....can you please show me what it might look like in relation to the code you posted above?
<a href="index2.html" target="mainFrame">UDAT</a>
thank you!

I am really sorry for my confusion....I know what you posted probably makes perfect sense, but this is all still a foreign language to me.

Thank you for your help!
 
Upvote 0 Downvote
Stick this script after your <head> tag
Code: 
<script>
<!--
function makePlain(obj) {
defColor = "#FF0000";
defSize = "10px";
    // Set all links back to default
    for (c=0; c<document.links.length; c++) {
        if (document.links[c].style.color != defColor)
            document.links[c].style.color = defColor;       
        if (document.links[c].style.fontSize != defSize)
            document.links[c].style.fontSize = defSize;
    }

    // Set the clicked link's properties
    obj.style.color = "#000000"; // Link color
    obj.style.fontSize = "11px"; // Link size
}
//-->
</script>

Your links would look like this
Code: 
<a href="index2.htm" target="mainFrame" [red]onclick="makePlain(this)"[/red]>UDAT</a>
<a href="otherPage.htm" target="mainFrame" [red]onclick="makePlain(this)"[/red]>CLICK ME</a>
<a href="YetAnotherPage.htm" target="mainFrame" [red]onclick="makePlain(this)"[/red]>CLICK ME</a>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
243
Alt255
Alt255
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
237
lmcate
lmcate
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
801
3esolar
3
Camila James
  • Locked
  • Question
Shopify vs. WooCommerce – Which Platform To Use For Your Online Store?
Replies
3
Views
201
lucasbrown
lucasbrown
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
265
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top