[Javascript] ISO unobtrusive JS way to change body class

[Paul Novitski]

At 12:32 PM 3/27/2006, Scott Moore wrote:
>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?


Hi Scott,

Part of the concept of unobtrusive javascript includes placing ALL 
javascript outside the HTML file.  If you embed it in your tags 
inline, a browser that doesn't support scripting or doesn't support a 
modern version of scripting could crash; plus from a management 
perspective you have to modify your HTML file any time you need to 
modify your script.  Isolating your script in an external file is 
definitely the way to go, linked to your page with a <script src=...> 
tag in the head.  You shouldn't need to have more than one external 
JS file regardless of how many functions you need to include.  Google 
window.onload or ask here if you're not sure how to proceed there.

 From an external script file, it's quite easy to assign functions to 
the mouseover and mouseout events of your menu items.

If you're sensitive to unobtrusiveness you might also want to ponder 
the accessibility issues of mouseovers.  People lacking in fine motor 
coordination can find mouseover menus a real pain.  At the very least 
you should consider making your menus operable entirely by 
keyboard.  Then you'll need to monitor focus & blur events as well as 
mouseovers & mouseouts.

Regards,
Paul