Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #41250 > unrolled thread

Click on Non-transparent Part of an Image

Back to article view | Back to comp.lang.javascript

Contents

  Click on Non-transparent Part of an Image Andrew Poulos <approg@gmail.com> - 2023-03-26 15:43 -0700
    Re: Click on Non-transparent Part of an Image JJ <jj4public@outlook.com> - 2023-03-27 20:24 +0700
    Re: Click on Non-transparent Part of an Image "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2023-03-29 09:40 -0700
      Re: Click on Non-transparent Part of an Image Andrew Poulos <approg@gmail.com> - 2023-04-01 16:16 -0700
        Re: Click on Non-transparent Part of an Image Arno Welzel <usenet@arnowelzel.de> - 2023-04-02 12:08 +0200

#41250 — Click on Non-transparent Part of an Image

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.

[toc] | [next] | [standalone]

#41251

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

[toc] | [prev] | [next] | [standalone]

#41253

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

[toc] | [prev] | [next] | [standalone]

#41255

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?

[toc] | [prev] | [next] | [standalone]

#41256

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web