Ignore mouse interaction on transparent parts in image and assign it to the image below

i have two tables with images that parts of them are transparent and i want to ignore mouse interactions (especially clicking) on these parts and assign the click to the image in the other table 开发者_如何学Gothat below.

(i hope you understand because english is not my native language.) thanks..

Image map should do it.

One method, all though maybe not necessarily the most efficient, would be to copy your top/clicked image to a canvas and do a look up on it for the color value of the pixel where the user clicked. If the alpha value of that pixel is transparent, call the onclick of the underlying image (or just return false if the underlying image also gets the click event automatically, I'm not sure if it would or not). I'm not exactly sure how long such processing would take, though.

Update: I just implemented this method and there's no noticeable delay copying the image to the canvas and checking its pixel.

I'm afraid this is not likely to be possible. The bounding box for HTML elements are rectangular, even for elements with transparency. It is for this bounding box that mouse events fire on.

The event will propagate through the parent elements, so if your other element is one of the parents you can still capture the click event, but it will fire for both elements.