Frames and Classes

[Tyrone Slothrop]

I have a web page with two frames, navigation and content. The nav
uses classes like so
<td align="center"
id="main"
style="cursorointer;"
onClick="parent.main.location.href='main.html'"
onMouseOver="this.className='nav0'"
onMouseOut="this.className='nav1'"
class="nav0">Main Page</td>

The class nav1 is the default state.
The class nav0 is the "lit" state.

What I need to do is make the "button" light up when a given page is
loaded and remain that way.

OnLoad of main.html, I can do:
onLoad="parent.frames['nav'].document.getElementById('main').className='nav0'"

Of course, once the mouse passes over the button, onMouseOut it
returns to the default state.

Is there a way to make the "lit" state persist?

While I am writing this, a possibility has crossed my mind. The
location of the content frame can evaluated and return the proper
class:

onMouseOut="
if (parent.content.href.indexOf('main')) {
this.className='nav0';
} else {
this.className='nav1';
}"

Or am I mixing JS and DHTML? My specialties are PHP and Perl and I am
into my 16th hour today. The words blur and sleep beckons. ;-)

TIA for any assistance!

Tom (aka Tyrone Slothrop)

 

[Stephen Chalmers]

I have a web page with two frames, navigation and content. The nav
uses classes like so
<td align="center"
id="main"
style="cursorointer;"
onClick="parent.main.location.href='main.html'"
onMouseOver="this.className='nav0'"
onMouseOut="this.className='nav1'"
class="nav0">Main Page</td>

The class nav1 is the default state.
The class nav0 is the "lit" state.

What I need to do is make the "button" light up when a given page is
loaded and remain that way.

OnLoad of main.html, I can do:
onLoad="parent.frames['nav'].document.getElementById('main').className='nav0
'"

Of course, once the mouse passes over the button, onMouseOut it
returns to the default state.

Is there a way to make the "lit" state persist?

While I am writing this, a possibility has crossed my mind. The
location of the content frame can evaluated and return the proper
class:

onMouseOut="
if (parent.content.href.indexOf('main')) {
this.className='nav0';
} else {
this.className='nav1';
}"

It would be less hideously written as:
onMouseOut="this.className=(parent.content.href.indexOf('main')>-1?'nav0':'n
av1'";

Better still, don't write it at all.

Put this code in your navigation page:
------------
var linkIndex=0; // or set to another initial value

for(var i=0,len=document.links.length; i<len; i++) // assign all link
mouseout events
document.links.onmouseout=function(){setLink(linkIndex)}

function setLink(n)
{
linkIndex=n;

for(var i=0,ll=document.links.length; i<ll; i++)
document.links.className=(n==i)?'nav1':'nav0';
}

setLink( linkIndex ) ;