Change and change-back formatted text in a <div> element upon mouseover.
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:
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.
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!
Here's an example that uses an event listener on each div with a specified ID. When the user mousesover a certain DIV, the "popup" for that div displays. when the user mouses-out of that div, the popup goes away.
Note: this page has another feature that you probably don't need - if the user clicks on the link, the "popup" content for that DIV goes away. If you don't want users to be able to hide-by-click, remove the 3 "click" event listners (leaving only "mouseover" and "mouseout".