Forum Moderators: open
On my home page I have a "display box" that shows standard information about one of three different divisions in our company (one at a time). The division profiled changes every hour so, theoretically, as people come to our site at different times during the day, they see a different division displayed. It works great for what it is intended to do. If someone wants to pick one of the other divisions, I supply three links (that have the standard link, visited, hover, and active styles) that changes the division displayed.
The problem I am having is I would like to programatically show a particular link as "active" and have it stay active while its respective division is up, and then go back to normal when the next division is ready to display. For example the standard link is blue, hover is dark blue, and active is red. I would like the link to show red (hover) when the respective division is displayed and go back to blue (link) when the next division is displayed. Am I heading in the right direction with changing the "active" state or should I be looking at something else like unlinking the text and setting the color to red when its respective division is displayed and then re-linking the text?
Although I would appreciate code snippits, I am not looking for you you to do my work for me so if you have any thoughts on the direction I should take, I would appreciate it. Thanks!
Then set color etc using css rule for active and possibly nonActive (if other than default link style required)
<html>
<head>
<title>Links</title><script type="text/javascript">
function disableLinks(){
document.getElementById('link1').innerHTML = 'link 1';
document.getElementById('link2').innerHTML = 'link 2';
document.getElementById('link3').innerHTML = 'link 3';
}function changeLink(theLink){
switch(theLink){
case 1:
document.getElementById('link1').innerHTML = '<a href="1.html">link 1</a>';
document.getElementById('link2').innerHTML = 'link 2';
document.getElementById('link3').innerHTML = 'link 3';
break
case 2:
document.getElementById('link1').innerHTML = 'link 1';
document.getElementById('link2').innerHTML = '<a href="2.html">link 2</a>';
document.getElementById('link3').innerHTML = 'link 3';
break
case 3:
document.getElementById('link1').innerHTML = 'link 1';
document.getElementById('link2').innerHTML = 'link 2';
document.getElementById('link3').innerHTML = '<a href="3.html">link 3</a>';
break
}
}
</script></head>
<body onload="disableLinks()"><div id="link1"><a href="1.html">link 1</a></div>
<div id="link2"><a href="2.html">link 2</a></div>
<div id="link3"><a href="3.html">link 3</a></div><p>
Change active link: <a href="#" onclick="changeLink(1)">one</a> - <a href="#" onclick="changeLink(2)">two</a> - <a href="#" onclick="changeLink(3)">three</a>
</p></body>
</html>
