[Javascript] Mapping Image

[Paul Novitski]

At 9/14/2006 05:02 AM, Henrique Rennó wrote:
>  You'll see what this code does when you point 
> the cursor over two different regions. What I 
> want to do is to freeze the menu to have time 
> to choose some options and turn it off if the 
> second region is pointed over or when clicking 
> in any free area and vice-versa.

Right.  Now you can add rules that reference the body class like so:

#picture A#part1:hover,
#picture A#part2:hover,
body.part1 A#part1,
body.part2 A#part2
         {border:2px solid #cc0;}

If you do that for each of the :hover rules, then 
your javascript can set the body className to 
your part id and the hover state will stick until the body class changes again.

There are other ways to do this as well.  I like 
the CSS method because a) the javascript logic is 
extremely simple and b) all the presentational 
details of how things look is confined to the stylesheet.
______________________

By the way, this style rule is redundant:

         #picture A#part1 {...}

Because Ids are unique on the page, there can be 
only one #part1, so you don't need to specify its parent.
______________________

Also, these rules are redundant:

         #picture A#part1:hover,
         #picture A#part2:hover

Given your markup, you can probably replace them with one rule:

         #picture A:hover
______________________

>This is the code. Change "sun.gif" for any other image.

Next time, please upload the page and images to 
your own server and send us the URL.  It's a lot 
to ask busy people to create a page and an image 
just to see what you're working on.
______________________

Regards,
Paul