2

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 that below.

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

TomBS
  • 21
  • 1
  • 2

3 Answers3

1

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.

Kaylakaze
  • 59
  • 3
1

Image map should do it.

David Murdoch
  • 87,823
  • 39
  • 148
  • 191
0

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.

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • so there is nothing i can do to get around this? – TomBS Apr 09 '10 at 14:14
  • @TomBS: As David Murdoch mentioned, you could use a `` for the topmost image, with one `` element for the transparent part. This `` element would have an `onclick` handler which would trigger the `onclick` for the bottom image. Short of doing that, there's nothing else you could do. – Andy E Apr 09 '10 at 19:01
  • @AndyE , is your answer still the same today? Because I have a similar question – Junaid Qadir Shekhanzai Mar 12 '12 at 10:38
  • @JeyKeu: See [`pointer-events`](http://stackoverflow.com/a/5298684/94197). Unfortunately, it's part of CSS4 and not yet implemented in some browsers. Also, browsers may not allow you to specify click through on transparent areas only. – Andy E Mar 12 '12 at 10:44
  • Yea, thanks, This is for reference for someone link me. [Pointer-Events](http://caniuse.com/pointer-events) [Pointer-Events MDN reference](https://developer.mozilla.org/en/CSS/pointer-events) [Tutorial on how to do it](http://css-tricks.com/pointer-events-current-nav/) – Junaid Qadir Shekhanzai Mar 12 '12 at 11:07