[Javascript] Mapping Image

Tue Sep 12 10:17:58 CDT 2006

At 9/12/2006 05:09 AM, Henrique Rennó wrote:
>Thanks for all the answers!!! I knew about map 
>inside html tags but as I'm new to JavaScript 
>what I wanted was something like the oldmaster 
>css example where I point over a part of an 
>image and some information appears beside the 
>image. What I really want to do is to show a 
>menu whenever some predefined map is activated 
>with the "over" event and keep it active until 
>the user pass over another point or click in a 
>free area of the page. Is there a menu option in 
>JavaScript (like a menu object with methods) ????

One way to freeze a menu on the screen until the 
next trigger event is with CSS class.  Consider this:

         <body class="menu01">
         ...
         <div class="menu" id="menu01">...</div>
         <div class="menu" id="menu02">...</div>

         .menu
         {
                 position: absolute;
                 left: -1000em;
         }

         body.menu01 div#menu01,
         body.menu01 div#menu01
         {
                 position: static;
         }

All the menus are hidden from view until a hover 
event sets the body class to match one of the 
menus.  That menu will remain displayed until 
another event occurs change the body class.

The usual way to accomplish this purely in 
JavaScript is to keep track of the 
currently-displayed menu and switch off its 
display properties when switching on the next.

I prefer the CSS method above because it so 
nearly separates the event-triggering behavior 
from the mechanism that determines how an element is displayed or hidden.

Regards,
Paul 