如何使用鼠標點擊絕對定位的圖像區域地圖？

Question

我使用絕對定位將幾個圖像放在彼此的頂部。 這些圖像是部分透明的，並且有一個html area和map ，只能使可見部分可點擊。 在jQuery中，我將鼠標事件附加到area標記。

這適用於一個圖像：只有在輸入圖像的映射部分時才會觸發mouseenter和mouseleave。

問題是它只適用於頂部圖像。 對於所有其他人來說，它不會觸發事件而不是CSS懸停工作，因為它上面還有另一個圖像。 盡管area s不重疊並且map s位於圖像前面。

以下是該問題的演示： http ： //markv.nl/stack/imgmap2/

Answer 1

您可以在所有單個圖像的頂部放置一個完全透明的圖像，並將所有圖像映射區域附加到該圖像。 它將充當鼠標事件的捕獲元素，您仍然可以更改所有單個圖像。

Answer 2

這不是一個直接的答案/解決方案......

為什么不使用畫布/ SVG進行繪圖？ 有很多庫可以讓任務變得簡單。 其中一個是RaphaëlJS （查看這個例子 ）。 該庫的優點是它允許鼠標交互。

您可以考慮的另一個庫是EaselJS ，但它不支持<canvas>的瀏覽器，因此沒有IE <9支持。

Answer 3

僅當圖像不重疊時才有效（見圖）。 在您的情況下，所有圖像具有完全相同的大小並且彼此堆疊。 由於瀏覽器將圖像視為固體對象（它們不會對透明度感到煩惱），因此無法確定當前要懸停的圖像？

  +-----------+-----------+
  |           |           |
  |   img1    |   img2    |
  |           |           |
  |           |           |
  +-----------+-----------+
  |           |           |
  |   img3    |   img4    |
  |           |           |
  |           |           |
  +-----------+-----------+

但是，您可以解決此問題：

只需在包含所有區域的其中一個圖像上使用單個圖像映射，並使用一點javascript即可觸發所有其他圖像上的懸停效果。

$("area").hover(function(){
    var $target = $("#"+$(this).data("target")); // getting the target image
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image
},function(){
    var $target = $("#"+$(this).data("target"));
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes
});​

基於您的代碼的工作示例： jsFiddle-Demo

Answer 4

你也可以使用具有固定高度和寬度的宮殿透明div，它具有帶綁定功能的onclick（）事件。 像：

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>