Re: Click on Non-transparent Part of an Image

Path	csiph.com!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From	Arno Welzel <usenet@arnowelzel.de>
Newsgroups	comp.lang.javascript
Subject	Re: Click on Non-transparent Part of an Image
Date	Sun, 2 Apr 2023 12:08:02 +0200
Lines	40
Message-ID	<k8t2g1F8p01U1@mid.individual.net> (permalink)
References	<f9289988-25e5-4e02-bc92-cf39c69be08dn@googlegroups.com> <f7ddb082-a6c8-4105-8fb9-bf1beb4dfacen@googlegroups.com> <a704d822-b62b-4df8-8628-c7ad55769d0an@googlegroups.com>
Mime-Version	1.0
Content-Type	text/plain; charset=UTF-8
Content-Transfer-Encoding	8bit
X-Trace	individual.net /HhM0eAjDamPq6UDu2Mi1wNHLxD/NZ9+dytx4PBmSaxauspO44
Cancel-Lock	sha1:Jq5I+djYO7yLSvojUqUEM1OeghY=
Content-Language	de-DE
In-Reply-To	<a704d822-b62b-4df8-8628-c7ad55769d0an@googlegroups.com>
Xref	csiph.com comp.lang.javascript:41256

Show key headers only | 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