jQuery ignore transparent areas of images

Question

I want to make something to what has been done here:

http://www.cw-internetdienste.de/pixelselection/

However, it doesn't work if I just copy the pixelSelection.js file from this site. I would really like to make my own, not just something somebody else wrote, but am clueless how to do it.

I've tried .svg and image mapping together, but even if I image map I can't hover the background image within the foreground transparent area, and it's really difficult to map every image in detail.

FWICT, the code on this page should work elsewhere ... do you have an example of it not working on your own site? — razzed, Jul 29 '10 at 13:25
Sure: http://emilmoe.dk/ - I must have misunderstood a detail somewhere — Emil Moe, Jul 29 '10 at 13:45
Well, the `pixelselection` page doesn't work for me. I always get `undefined clicked!` so the problem may not be your implementation, but the example. — Peter Ajtai, Aug 25 '10 at 03:52

score 2 · Accepted Answer · answered Feb 02 '13 at 15:39

Ya the old version of my script was kinda buggy, I recently updated it with a much more configurable and cleaner jquery plugin version. I also published it on github.

http://www.cw-internetdienste.de/pixelselection/

Maybe the new version might help you with your problem.

score 0 · Answer 2 · edited May 23 '17 at 12:01

You could use the answer to this SO question in order to get the RGBA values for a pixel of an image using JavaScript, I'll call this:

isTransparrent(imageUrl, x, y);

Then whenever you hover over an image you can check using that function:

$('#some-image').hover(function(e) {
    var isTrans = isTransparent(
        this.src,
        e.pageX - $(this).pageX, // relative x position in image
        e.pageY - $(this).pageY  // relative y position in image
    );
    console.log(isTrans ? 'transparent pixel', 'not transparent pixel');
});

jQuery ignore transparent areas of images

2 Answers2