Objects In Transparent Images Made Clickable: alphaPun.ch

Posted by Sources at 2:34 AM

Using transparent images in websites make so much sense in many cases as they fit perfectly to any background.

However, there is sometimes a big empty space around images which can create confusion when clicking on them as users may not easily realize that the clicked part of the website is actually an image.

alphaPun.ch changes that by tracing the opaque part of PNG or GIF images and then punch through the alpha channel so the stuff behind it can be clicked.

alphaPun.ch

Behind the scenes, it creates a mask for the opaque part of images along with masks for the clickable content behind them. The masks are positioned above the real image and users will actually be clicking to these masks.

It works by drag 'n' dropping an image to the loader and an HTML-CSS-JS (with jQuery) code is created automatically.

The project is definitely not a good fit for every image on websites but there will certainly be good cases of use.

P.S. alphaPun.ch is open source.