That's interesting, I'll definitely take a look at Raphael. Did you just need the silhouette, or did Raphael let you do the click through thing too?

I was able to do the click through using the invisible path. The project was a kind of weird puzzle, so the click through was a must.

I upped my prototype here: http://dl.dropbox.com/u/491131/puzzle/puzzle.html You can only drag the camel.

Eventually I gave up because I wasn't able to drag the piece correctly if it was rotated.

That's awesome, thanks for showing me that. It would definitely be cool to implement something similar for browsers with SVG support, then fallback to the generated spans for those without.

Raphael is so awesome that it works even on IE, using VML, with the same sane API.

I don't think you're being a jerk, I think it's great feedback. :) I appreciate your candor about forgetting to revisit.

I'm hoping to add better fallbacks shortly.

That's really cool, I didn't know about that. Thanks!

The difference here is that with alphaPun.ch you're only clicking through the transparent parts of the image; the opaque parts still block clicks. If I understand that document correctly, pointer-events would only allow you to click through the whole image. (Except with SVG?) Is that right?

Yes, that's right; pointer-events in HTML can only be applied to whole images.

For the initial launch, my intention was to build something interesting using new HTML5, CSS3 and JavaScript features and techniques. Now that it is launched and working in the browsers targeted by the contest (current Firefox, Chrome and IE10pp2) my goal will be to expand it to work with browsers that don't support all these features.

I don't have it registered with the α unicode character, only the normal roman a -- http://alphapun.ch or http://www.alphapun.ch.

Thanks! Now if you do need it, you'll have options. :)

BTW, I have a write-up about it here: http://davidnewton.ca/introducing-alphapunch

Performance is a valid concern, but so far in the tests I've run I haven't hit any real problems. If you encounter any slow downs or real performance issues, I'd love to hear about them (and hopefully eliminate them!)

Thanks!

As a Safari user, I actually totally agree, and it was a hard choice to leave it out of the first iteration. The reason was that this was made for the 10K Apart contest (10k.aneventapart.com) and I was really, really struggling to get the code in under 10k. Having the extra functionality pushed me over the edge. I will definitely be making it support more browsers over time, and adding more options. Or, you could always fork it on github and add it yourself. (https://github.com/nwtn/alphapun.ch) :)

That's wonderful. What does your site do?? :-/

Edit: I am/was wrong, see below. Sorry! :$

Really, people?

From the site: "α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 are we having trouble understanding here?

EDIT: Here I am, using elinks: http://i.imgur.com/UaX0M.png I'll remind you that elinks's support for drag-and-drop is, err- limited. I nonetheless have no trouble understanding what alphapunch does.

On Safari, one only sees "WEB BROWSER [meme image] Y U NO FILEREADER?!"

Nonsense! - the site is a picture of 'Y U NO man', saying "WEB BROWSER - Y U NO DRAGNDROP?!"...

oops! My apologies; I tried the site with firefox then with elinks, it wasn't until I tried IE that I hit the sweet spot of too-few-features-but-not-so-few-the-feature-check-doesn't-work. Sorry to3m et al.; you are right that fallback is horrendous and unacceptable, no matter the limitations of the contest.

The limitations of the contest were that it must support current versions of Chrome, Firefox, and IE10pp2, which it does in this launch version. Now that it's working in those browsers, further browser support and better fallbacks are my top priority.

Yes, the fallback is not adequate for a general release tool, so maybe I should have waited before posting it here. But, I thought people might still find it interesting, and I wanted some feedback before submitting it for the contest.

Apologies to those that are being frustrated by these limitations at launch.

I think the tool is cool, but you could have shown an error message and greyed out/disabled the input elements rather than disable the entire site and block the user from reading anything.

It lets you upload a transparent PNG or GIF and will trace the opaque parts. It then spits out some HTML/CSS/JS that you can put on your site that allows you to click through the transparent parts of the image.