[Javascript] ISO unobtrusive JS way to change body class

Mon Mar 27 14:32:35 CST 2006

I'm working on a proof of concept for a navigation system and am in  
need of some help. At the moment, I've got this code:

<body class="first">
<ul id="navmenu">
<li id="first"><a href="#"  
onMouseover="document.body.className='first'">First Section</a></li>
<li id="second"><a href="#"  
onMouseover="document.body.className='second'">Second Section</a></li>
<li id="third"><a href="#"  
onMouseover="document.body.className='third'">Third Section</a></li>
</ul>

The idea is when you hover over an option, the JS changes the class  
of the body tag and the associated sub-menu is displayed. However,  
when you roll off an option, the class of the body tag doesn't return  
to it's original setting. Now for each section, I could create a  
separate nav file and add  
onMouseout="document.body.className='current_section'" to each link,  
but that's too messy and I want to have only 1 nav file.

So with the intention of following the idea of unobtrusive JS, I  
don't believe I'm heading in the right direction by using  
onMouseover. Can anyone point me in the direction I should be going a  
cleaner solution?

Scott