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.

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

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`.

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

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

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

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.

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?

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

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

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)