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

Groups > comp.lang.javascript > #41256

Re: Click on Non-transparent Part of an Image

Show all headers | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web