I have several images positioned on top of each other using absolute positioning. These images are partially transparent, and have a html area and map to make only the visible parts clickable. In jQuery, I have attached mouse events to the area tags.
This works well for one image: mouseenter and mouseleave fire only when the mapped part of the image is entered.
The problem is that it only works for the top image. For all others, it doesn’t fire events not does CSS hover work, because there is another image on top of it. This despite the fact that the areas do not overlap and maps are in front of the images.
Here is a demonstration of the problem: http://markv.nl/stack/imgmap2/
You can place a single, completely transparent image on top of all individual images, and attach all imagemap areas to that image. It will act as a capturing element for the mouse events, and you can still change all individual images.