Clever Geek Handbook

Ignore mouse interaction with transparent parts in the image and assign the image below

I have two image tables, parts of which are transparent, and I want to ignore mouse interactions (especially clicking) on ​​those parts and click on the image in the other table below to assign them.

(I hope you can understand, because English is not my first language.) thanks ..

+1


source to share


3 answers


The image map should do this.



+1


source


I am afraid this is hardly possible. The bounding box for HTML elements is rectangular, even for elements with transparency. It is for this bounding box that mouse events occur.



The event will propagate through the parent elements, so if your other element is one of the parents, you can still capture the click event, but it will fire for both elements.

0


source


One technique, although perhaps not necessarily the most efficient one, is to copy your top / clicked image onto the canvas and look at it for the color value of the pixel the user has clicked on. If the alpha value of that pixel is transparent, call the onclick of the main image (or just return false, if the base image also automatically receives a click event, I'm not sure if it will or not). I'm not really sure how long this processing will take.

Update: I just implemented this method and there is no noticeable delay in copying the image to the canvas and checking its pixel.

0


source






More articles:


All Articles