Detect click on non-transparent area of PNG

teo1310 · April 16, 2025, 4:36pm

Hi,
I have imported a PNG image with transparency in my Hype document.
What would be the most straightforward way to detect a click on its non-transparent area? (without creating svg path or vector object).
Thanks.

Daniel · April 16, 2025, 5:15pm

Not easy, but a fun challenge!

It requires setting a class on the image: clickable-transparency

It looks at alpha on each pixel and turns on or off click/touch events.

Demo: https://short-umbrella.surge.sh/alpha_detector/alpha_detector.html

alpha_detector.hype.zip (107.2 KB)

With help from GPT-4.1.

teo1310 · April 17, 2025, 10:19am

Thanks a lot Daniel, it works perfectly!
Do you think there is a way to make it work when 2 PNGs are on top of each other or overlap? (see attachment)
Currently, it prevents clicking on the background PNG while the cursor is still over the foreground PNG's transparent area.
alpha_detector_2PNGs.hype.zip (127.9 KB)

Daniel · April 17, 2025, 1:42pm

Here's an update: alpha_detector_multiple.hype.zip (127.0 KB)

gist.github.com

https://gist.github.com/themorgantown/2662fdd67e3d3fdb15ee6c05c6e2e315

detect-transparency-image.js

    /*
 * Clickable Transparency Library
 * --------------------------------
 * This script enables non-transparent parts of an image to be clickable.
 * It works for both <img> elements and any element with a background image.
 * For any element with the "clickable-transparency" class:
 *  - It changes the mouse cursor to 'pointer' over non-transparent areas and 'default' over transparent areas.
 *  - It prevents click propagation if a transparent area is clicked.
 *
 * Usage:

This file has been truncated. show original

teo1310 · April 18, 2025, 8:52am

Thanks a lot Daniel!
This is exactly what I was looking for.