檢測圖像中的對象（圖像），創建形式重疊的圖像

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/