1. Forum
  2. Usenet
  3. COMP.LANG.JAVASCRIPT

  • Click on Non-transparent Part of an Image

    From Andrew Poulos@21:1/5 to All on Sun Mar 26 15:43:07 2023
    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)
  • From JJ@21:1/5 to Andrew Poulos on Mon Mar 27 20:24:57 2023
    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)
  • From Michael Haufe (TNO)@21:1/5 to Andrew Poulos on Wed Mar 29 09:40:28 2023
    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)
  • From Andrew Poulos@21:1/5 to All on Sat Apr 1 16:16:45 2023
    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)
  • From Arno Welzel@21:1/5 to All on Sun Apr 2 12:08:02 2023
    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)