检测图像中的对象（图像），创建形式重叠的图像

Question

我有一个主要图像，从其他图像合成z-index重叠。假设我们有一间浴室，而且我有单独的地板图像，墙壁，灯光等等。我用z-索引所有小部件/图像来构建洞空间。 我想要检测何时鼠标指针位于图像的不同部分，并提醒其名称。例如，当我指着地板时，脚本说 - >这是地板。 我尝试不同的方法，但没有运气。总是有一些无法用z-index很好地隐藏的大元素，它的透明背景穿越了其他元素，并且它需要悬停事件。

$("#floor").attr('title', 'This is the hover-over text for the floor'); 
     $("#floor").on('hover', function() { 
     console.log('this is the floor!'); 

    }); 

这就是我使用了 - >地板是我的DIV IMG元件保持地面图像的ID。 这不太好，因为图像中的物体的边缘，真的我不能削减图像，或者我有三角形和矩形进入另一个对象/图像。 我尝试使用画布，但是我不喜欢结果，因为画布将所有内容都包装在一个大窗口中，并且无法操作图像的每个部分。 有人可以给我一个建议，我可以尝试什么，或者用什么来做到这一点。 见图片：

绿色工作正常，我得到正确的悬停文本，但红色是错误的，因为它告诉我，我是上厕所，我不..我” m在对象之外，我在地板上。这是因为它检测到WC图像的透明背景。我想要找到每个元素的确切大小。如果这可以帮助作为例子。

Answer 1

我认为你可以在你拉斐尔JavaScript库为此：http://dmitrybaranovskiy.github.io/raphael/