αLPHAPUN.CH

PUNCH THROUGH YOUR ALPHA CHANNELS

WHAT IS THIS?

An image with a transparent background is like a painting on a window: you can see all sorts of exciting things behind it, but you can’t reach through to touch them. αlphaPun.ch changes that!

αlphaPun.ch will trace the opaque part of your PNG or GIF image. It will then punch through the alpha channel (i.e. the transparent bit), so you can click on things behind it.

WHAT’S REALLY GOING ON?

αlphaPun.ch creates a mask for the opaque part of your pic, along with masks for the clickable content behind it. These masks are placed above the actual image. Clicking a link’s mask will trigger a click on that link.

DEMO

square
No αlphaPun.ch==no clicky
square
αlphaPun.ch: clickable links
  1. Drag an image here!
  2. αlphaPunch It!

RESULTS!

Image
Mask

Example HTML
<!-- container indicating alphapunching --> <div class="alphapunch"> <!-- image you alphaPunch'd. needs an ID if you run into trouble positioning it, put it in a container element, like <figure> --> <figure><img id="img" src="img.png" alt="img" /></figure> <!-- "target" links you want to click through to. they all need IDs. if you run into trouble positioning them, put them in a container element, like <nav> or <ul> or <div> --> <ul> <li><a class="aptarget" id="foo" href="javascript:alert('foo')">foo</a></li> <li><a class="aptarget" id="bar" href="javascript:alert('bar')">bar</a></li> </ul> </div> <!-- alphapunch uses some jQuery; it must be present --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
/* stacking order from back-to-front is: 1. links 2. image 3. link masks 4. image mask IE requires a BG to register click event. */ .alphapunch { position: relative; } .alphapunch img { position: relative; z-index: 2; } .aptarget { display: inline-block; } .apmask span { z-index: 3; background: rgba(0,0,0,0.001); } img + .apmask span { z-index: 4; }
Example CSS
JavaScript for your site