How to make absolute positioned image area maps clickable with mouse?

Question

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/

Answer 1

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.

Answer 2

It's not a direct answer/solution...

Why don't you use a canvas/SVG to do the drawing? There is plenty of libraries which make the task easy. One of them is RaphaëlJS (check this example). The advantage of this library is that it allows mouse interactivity.

Another library you may consider is EaselJS, but it doesn't work in the browsers not supporting <canvas>, so no IE < 9 support.