Clicking on transparent image

Question

I have an square image depicting a car on a transparent background. I want to be able to click on car, yet when I click on it's transparent background I'd like the click to go through the image and trigger on the underlying DOM element (or, specifically, other image).

Can that be achieved somehow?

Only with a [``](https://developer.mozilla.org/en/HTML/Element/map) attached to the image. — lanzz, Jul 17 '12 at 09:02
@lanzz, nice thought, please post it as an answer, so the OP (and others) may benefit from it. — Eliran Malka, Jul 17 '12 at 10:50

score 3 · Accepted Answer · edited May 23 '17 at 10:34

That's quite complex, but can be achieved by combining Pointer events to allow for the click to bubble up the DOM (reaching the img parent container), and a faux Canvas on top to detect a transparent pixel (which will be used as a flag to activate the event delegation).

Pointer events were derived from the SVG model to allow for event delegation across layers. Note that they're currently not supported on IE and Opera.

Related Posts:

Demo:

pointer-events on jsFiddle

Reference:

Further Read:

Thank you for your answer, Eliran. Will be doing further research. — oldhomemovie, Jul 17 '12 at 21:18

score 0 · Answer 2 · answered Jul 17 '12 at 09:10

No, click events on images are not controlled by the transparency of the image. The click will always be triggered on the image, then bubble up to the parent if it's not stopped.

An image can have semi transparent pixels, and if a pixel has for example 61% opacity, then 37% of the click would go to the parent element, and that is of course not possible.

score 0 · Answer 3 · answered Jul 17 '12 at 09:45

0

You could draw nan SVG shape around the car and put the picture inside it, then listen for click events on the shape.

answered Jul 17 '12 at 09:45

Spadar Shut

15,111
5
47
54

Clicking on transparent image

3 Answers3