Click on Non-transparent Part of an Image

[Andrew Poulos]

Is there a way to detect a click only on the non-transparent part of an image?

That is, a click on a transparent part works as if pointer-events is set to none and a click on a non-transparent part works as if pointer-events is set to auto.

[JJ]

On Sun, 26 Mar 2023 15:43:07 -0700 (PDT), Andrew Poulos wrote:
> Is there a way to detect a click only on the non-transparent part of an
> image?

Keep the image on a hidden CANVAS of the same size. Use the IMG click
coordinate to retrieve the pixel value from the CANVAS. Check the alpha
channel value of the pixel.

> That is, a click on a transparent part works as if pointer-events is set
> to none and a click on a non-transparent part works as if pointer-events
> is set to auto.

That may not work as expected, depending on how the IMG element and its
container elements are styled. The click coordinate may not be same as the
IMG element's bounding area.

As long as an element (e.g. the IMG) has `pointer-events:none` style, it
will not trigger a click event. Only its container elements will trigger the
event - assuming that they're not also styled with `pointer-events:none`.

[Michael Haufe (TNO)]

On Sunday, March 26, 2023 at 5:43:12 PM UTC-5, Andrew Poulos wrote:
> Is there a way to detect a click only on the non-transparent part of an image?
>
> That is, a click on a transparent part works as if pointer-events is set to none and a click on a non-transparent part works as if pointer-events is set to auto.

You can use css clip-path to define clickable areas.

<https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>

Example usage:

<https://codepen.io/mlhaufe/pen/YzOMOGv?editors=1100>

clicking on the clipped areas will not trigger an alert but the visible portions will

[Andrew Poulos]

Thanks for the replies. Alas the image doesn't have regular shaped transparent parts and using a secondary canvas won't work as well as I'd like.

I need to wait till something like point-events: painted works on images other than SVG. Maybe I'll look at embedding an image in an SVG?

[Arno Welzel]

Andrew Poulos, 2023-04-02 01:16:

> On Thursday, 30 March 2023 at 03:40:33 UTC+11, Michael Haufe (TNO)
> wrote:
>> On Sunday, March 26, 2023 at 5:43:12 PM UTC-5, Andrew Poulos wrote:
>>
>>> Is there a way to detect a click only on the non-transparent part
>>> of an image?
>>>
>>> That is, a click on a transparent part works as if pointer-events
>>> is set to none and a click on a non-transparent part works as if
>>> pointer-events is set to auto.
>> You can use css clip-path to define clickable areas.
>>
>> <https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>
>>
>> Example usage:
>>
>> <https://codepen.io/mlhaufe/pen/YzOMOGv?editors=1100>
>>
>> clicking on the clipped areas will not trigger an alert but the
>> visible portions will
>
> Thanks for the replies. Alas the image doesn't have regular shaped
> transparent parts and using a secondary canvas won't work as well as
> I'd like.

clip-path can also be a complex path:

For example:

clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

Also see <https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>


--
Arno Welzel
https://arnowelzel.de