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

我有幾個圖像使用絕對定位在彼此的頂部。這些圖像是部分透明的，並且具有html area和map以僅使可見部分可點擊。在jQuery中，我已將鼠標事件附加到area標籤。如何使用鼠標點擊絕對定位的圖像區域地圖？

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

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

這是問題的一個示範：http://markv.nl/stack/imgmap2/

來源

2012-05-28 Mark

是否有一個重疊多個圖像的特殊原因？爲什麼不分離並將其全部顯示在一個圖層中？ –

你可以問一個問題嗎？ – Christoph

我添加了一個問題。無法使用一張圖片，因爲我想更改懸停時的單個圖片。 – Mark

你可以把所有單個圖像的上方設置了一個完全透明的圖像，所有圖像映射區附加到圖像。它將作爲鼠標事件的捕捉元素，並且您仍然可以更改所有單個圖像。

來源

2012-06-08 13:24:09 lanzz

可以在這個[** SO Answer **]（http://stackoverflow.com/a/9089386/1195891）上看到詳細的解釋，它也顯示了一個不同的方法，不使用[** SO Question ** ]（http://stackoverflow.com/q/9088931/1195891）海報建議。 – arttronics

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

你爲什麼不使用帆布/ SVG做圖紙嗎？有許多庫使得任務變得簡單。其中之一是RaphaëlJS（檢查此example）。這個庫的優點是它允許鼠標交互。

另一個庫你可能會考慮的是EaselJS，但它不支持在瀏覽器中不支持<canvas>，所以沒有支持IE <。

來源

2012-06-08 13:29:55 strah

這個RaphaëlJS[Example]（http://raphaeljs.com/pie.html）更接近OP的鏈接例子。 – arttronics

只有當圖像不重疊時才起作用（參見圖）。在你的情況下，所有的圖像具有完全相同的尺寸並且彼此堆疊。由於瀏覽器將圖像視爲固體對象（它們不會影響透明度），因此無法確定您想要在此刻懸停的圖像？

+-----------+-----------+ 
    |   |   | 
    | 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

來源

2012-06-08 13:35:36 Christoph

+ 1爲良好的解決方法jsFiddle演示。 – arttronics

你也可以宮殿固定的高度和寬度透明的div會具有的onclick（）的綁定功能事件。如：

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

來源

2012-06-10 15:53:11

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

回答

相關問題