精確點擊重疊的divs

如果標題不能很好地解釋它，我很抱歉，但這是我能想到代表我的問題的最佳標題。精確點擊重疊的divs

所以我有兩個div：

.div-arrow 
{ 
    position: absolute; 
    float: left; 
    cursor: pointer; 
    display:block; 
    width: 136px; 
    height: 54px; 
    vertical-align: middle; 
    border-radius: 4px; 
    background: url(ImagePathHere) no-repeat scroll 0px 0px transparent; 
    zoom: 50%; 
} 

.div-diamond 
{ 
    position: absolute; 
    float: left; 
    cursor: pointer; 
    display: block; 
    width: 83px; 
    height: 54px; 
    vertical-align: middle; 
    border-radius: 4px; 
    background: url(ImagePathHere) no-repeat scroll -272px 0px transparent; 
    zoom: 50%; 
}

我用它們做這樣的佈局：http://i.stack.imgur.com/htFRd.png

點擊其中紅色標記是將激活綠鑽，而不是鑽石看起來像你點擊。我想知道如何去修剪那些看不見的圖像/ div部分，以便實際上點擊看起來像點擊的div。

來源

2013-03-28 user2216177

你有沒有考慮圖像映射？ – meagar

網頁上的所有元素基本上都是塊 - 所以雖然你可以創建一個圓形或菱形的外觀，但它仍然是一個四面的塊元素。

對於你的問題，你可以考慮使用任何圖像映射：

http://www.w3.org/TR/html401/struct/objects.html

或者可能使用HTML5的Canvas方法：

https://developer.mozilla.org/en-US/docs/HTML/Canvas

來源

2013-03-28 17:09:49

我研究過使用一個畫布和一個圖像映射，並與圖像映射，因爲它似乎更多的是我正在尋找。錯誤的鑽石被激活的原始問題不再存在，但仍然存在不激活適當鑽石的問題。使用我原始問題中的同一個例子，點擊紅色點既不激活鑽石，也相信這是一個重疊的問題，因爲每顆鑽石周圍仍有一些區域是透明的，但它們被認爲是圖像的一部分。） – user2216177

有沒有更好的方式來確定它應該點擊什麼，或者是我最好的選擇，在每個透明區域的每張地圖上添加一個區域，以激活它看起來應該激活的區域？（2/2） – user2216177

I只能認爲你沒有設置圖像地圖，你可能會。你用什麼來創建圖像映射？我建議使用Dreamweaver，並且應該能夠按照需要準確映射圖像的每個部分。 –

精確點擊重疊的divs

回答

相關問題