PDA

Click to See Complete Forum and Search --> : Menulinks change color?

Jakal_Xtreme
10-24-2004, 01:44 PM
I believe you have to use javascript for this, im not sure tho. My site, http://jakal.vze.com (which uses frames) for the "appz" menulink on the left, I'd like it to load to the security page, with the security link on top to be black with white lettering. Which would be the opposite color scheme of the other links to the right of it. Then when a user clicks another link to the right, it too would be black with white lettering, but all the other top links would have the opposite color scheme again. While having the mouse over and mouse out code it currently has, except the link for the current page its displaying, which wouldnt display any mouse out, mouser over code, it would just stay black with white lettering. Is this possible? I tried forever to find a solution to this without any avail, any help would be greatly appreciated. Sorry for the long post.

I have a ton of gmail invites too that i'll never use, to anyone who can help. As a small token of my gratitude.
Charles
10-24-2004, 02:17 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
a.active {
background-color:#f00;
color:#fff;
display:block;
font-weight:bold;
margin:1ex 0;
padding:0.5ex;
text-decoration:none;
width:5em;
}
a.inactive {
background-color:#a00;
color:#fff;
display:block;
font-weight:bold;
margin:1ex 0;
padding:0.5ex;
text-decoration:none;
width:5em;
}
-->
</style>

<script type="text/javascript">
<!--
function loggedOn () {
document.getElementById('menu').getElementsByTagName('A')[0].className = 'inactive';
var e, i = 1;
while (e = document.getElementById('menu').getElementsByTagName('A')[i++]) {e.className = 'active'};
return false;
}

if (document.getElementById) onload = function () {
document.getElementById('menu').getElementsByTagName('A')[0].className = 'active';
var e, i = 1;
while (e = document.getElementById('menu').getElementsByTagName('A')[i++]) {e.className = 'inactive'};
document.getElementById('menu').getElementsByTagName('A')[0].onclick = loggedOn;
}
// -->
</script>

</head>
<body>
<ul id="menu">
<li><a href="log-on.pl" class="active">Log on</a></li>
<li><a href="fee.html" class="active">Fee</a></li>
<li><a href="fee.html" class="active">Fie</a></li>
<li><a href="fee.html" class="active">Foe</a></li>
<li><a href="fee.html" class="active">Fum</a></li>
</ul>
<p><a href="http://wwww.w3.org">W3C</a></p>
</body>
</html>
Jakal_Xtreme
10-24-2004, 03:54 PM
thx for the reply, but i can't implement the code to what i was looking for. The first top menu button is focused, but when you click it, all the other ones reverse color :confused: Is there a way that each button you select, it changes black, and the previous button goes back to white?
Charles
10-24-2004, 04:10 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
a.active {
background-color:#f00;
color:#fff;
display:block;
font-weight:bold;
margin:1ex 0;
padding:0.5ex;
text-decoration:none;
width:5em;
}
a.inactive {
background-color:#a00;
color:#fff;
display:block;
font-weight:bold;
margin:1ex 0;
padding:0.5ex;
text-decoration:none;
width:5em;
}
-->
</style>

<script type="text/javascript">
<!--

function setLink () {
var e, i = 0;
while (e = document.getElementById('menu').getElementsByTagName('A')[i++]) {e.className = 'inactive'};
this.className = 'active';
return false;
}

if (document.getElementById) onload = function () {
var e, i = 0;
while (e = document.getElementById('menu').getElementsByTagName('A')[i++]) {e.onclick = setLink};
}
// -->
</script>

</head>
<body>
<ul id="menu">
<li><a href="fee.html" class="active">Fee</a></li>
<li><a href="fee.html" class="active">Fie</a></li>
<li><a href="fee.html" class="active">Foe</a></li>
<li><a href="fee.html" class="active">Fum</a></li>
</ul>
<p><a href="http://wwww.w3.org">W3C</a></p>
</body>
</html>
Jakal_Xtreme
10-24-2004, 10:48 PM
sweet, thats just what i was looking for :D I have one small add-on tho, is there a way for the first bar, in this example, "Fee" to be highlighted on the first page load? thx a ton, u rox!
Charles
10-25-2004, 04:55 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
a.active {
background-color:#f00;
color:#fff;
display:block;
font-weight:bold;
margin:1ex 0;
padding:0.5ex;
text-decoration:none;
width:5em;
}
a.inactive {
background-color:#a00;
color:#fff;
display:block;
font-weight:bold;
margin:1ex 0;
padding:0.5ex;
text-decoration:none;
width:5em;
}
-->
</style>

<script type="text/javascript">
<!--
function setLink () {
var e, i = 0;
while (e = document.getElementById('menu').getElementsByTagName('A')[i++]) {e.className = 'inactive'};
this.className = 'active';
return false;
}

if (document.getElementById) onload = function () {
var e, i = 0;
while (e = document.getElementById('menu').getElementsByTagName('A')[i++]) {e.onclick = setLink};
document.getElementById('menu').getElementsByTagName('A')[0].onclick();
}
// -->
</script>

</head>
<body>
<ul id="menu">
<li><a href="fee.html" class="active">Fee</a></li>
<li><a href="fee.html" class="active">Fie</a></li>
<li><a href="fee.html" class="active">Foe</a></li>
<li><a href="fee.html" class="active">Fum</a></li>
</ul>
<p><a href="http://wwww.w3.org">W3C</a></p>
</body>
</html>
Jakal_Xtreme
11-02-2004, 07:06 PM
sweet, but i have another problem now, the code doesn't work for frames which my site uses :(