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.
α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.
<!-- 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; }