检测图像中的对象（图像），从重叠图像

Question

我有一个主图像，由与z-index重叠的其他图像合成。让我们说我们有一个浴室，我有地板，墙壁，灯等单独的图像。我用z-indexing所有的小部件/图像建立孔空间。 我想检测我的鼠标指针何时在图像的不同部分上，并提醒其名称。例如，当我指着地板时，脚本说 - ＆gt;这是发言权。 我尝试了不同的方法，但根本没有运气。总有一些大元素无法用z-index很好地隐藏，它的透明背景与其他元素交叉，并且它会占用它们的悬停事件。

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

   });

这就是我现在使用的 - ＆gt; floor是我的DIV IMG元素的ID，用于保存地板图像。 这不适用，因为图像中的对象的边缘，并且实际上我不能剪切好的图像或我有三角形和矩形进入另一个对象/图像。 我尝试使用画布，但我不喜欢结果，因为画布将所有东西都包裹在一个大窗口中，并且不能操纵图像的每个部分。 有人可以给我一个建议，我可以尝试什么，或者用什么来做这件事。 见图：

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

Answer 1

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