Hi. I am working on a Web site consisting of 6 pages. There are 6 <a>nchors (links) on the left side of the page for navigation.

The Web site is displayed in a way where most of it does not change except for a small content <div> to the right of the table of contents. The entire page is supposed to fit onto a screen without the need of scrolling. The home page displays a welcome message in that content <div> when the page first loads.

Here's where I am having all kinds of trouble:
1) Right now, users are required to click on a link and open a whole new Web page to merely make it appear that the content <div> changed. Instead, I want JavaScript to change the content in the <div> when users hover the mouse over the link. (This will help me eliminate the need for having multiple html documents.)

2) When the user's mouse leaves the link area, I want the text to return to its original message. (Normally the content does not change back when the mouse leaves the link area, of course.)

3) I would like to have users actually click the link to prevent the content <div> from changing when the mouse leaves the link's area.

My whole goal, besides making an interactive Web site, is to both reduce the Web site to one page and to also make it pass w3c's strict XHTML validation checker.

Notes:
I tried document.write() but it erased my page and printed only the text which was supposed to show up in my content <div>.

I used document.getElementByID().innerHTML="" which seemed to work for regular text but it would not work when I included <span style="what:ever;">Content Message...</span> between the innerHTML quotes.

If I were rich, I would give you a million dollars to teach me how to do this, but I'm not, so I'll give you a great big pat on the back instead!