JQuery ignore transparent image areas

Question

I want to do something that was done here:

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

However, this does not work if I just copy the pixelSelection.js file from this site. I would really like to make my own, and not just something that someone else wrote, but I do not know how to do it.

I tried matching .svg and images together, but even if the image map cannot find the background image in the transparent foreground area, it is actually difficult to display each image in detail.

Answer 1

I the old version of my script was kind of a bug, I recently updated it with a much more customizable and clean version of the jquery plugin. I also posted it on github.

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

Perhaps the new version may help you in solving your problem.

Answer 2

You can use the answer of this SO question to get the RGBA values ​​for an image pixel using JavaScript, I will call this:

isTransparrent(imageUrl, x, y); 

Then whenever you hover over the image, you can check this 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'); });