Images and layers (HTML5, canvas, JS, CSS ??)

Question

I have two layers one on another top. First layers is background, second layer is flower. How I can know on what layer clicked.

1. If I clicked on background result it's good return first layer place where clicked:

2. If I clicked on flower result it's good return second layer place where clicked:

3. If I clicked on background near flower result it's bad return second layer place where clicked:

3.1 I get second layer because actually image is bigger, because image have transparent place:

For test use JSFiddle: http://jsfiddle.net/sbkhtvmo/1/

Answer 1

您可以尝试创建一个透明的SVG路径层，该层覆盖花并使其成为花单击层，然后将其他所有内容设置为背景单击层。

Answer 2

Use clientX and clientY to get the position of the mouse in the window.You can also do that with jQuery offset to get the position.

jQuery example that I found useful on stackoverflow:

$(document).ready(function() {
 $('imageElement').click(function(e) {
 var offset = $(this).offset();
 alert(e.clientX - offset.left);
 alert(e.clientY - offset.top);
 });
});