在css中通過重疊div來製作自定義圖像幀，但無法再訪問該圖像

我正在嘗試爲Google地圖iframe製作自定義的不規則幀。您可以到目前爲止在這裏看到我的結果：在css中通過重疊div來製作自定義圖像幀，但無法再訪問該圖像

http://bufident.com/pruebas/site02/contacto/contacto.html

（請原諒馬虎的標記）我能想出這樣做的唯一方法是有1個格與框架的股利與地圖重疊這樣

 <div style="width:418px; height: 375px;position:relative;top:-375px;z-index:3;"> 
     <iframe width="418" height="375" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=bufident&amp;hl=en&amp;sll=40.397236,-3.704112&amp;sspn=0.071946,0.071946&amp;ie=UTF8&amp;t=h&amp;view=map&amp;cid=5584215307643134377&amp;hq=bufident&amp;hnear=&amp;ll=40.397238,-3.704109&amp;spn=0.006128,0.008948&amp;z=16&amp;iwloc=A&amp;output=embed"></iframe> 
     </div> 
     <div style="clear:both;"></div>

不幸的是，如果我這樣做我不再能夠與地圖進行交互。我嘗試了在另一個線程（http://www.cssbakery.com/2010/11/css-cookie-cutter-revisited.html）中建議的稍微不同的方法，但我得到了相同的結果有什麼建議嗎？謝謝大家

來源

2011-06-09 takosuke

使用4個圖像，而不是一個..持有圖像的div必須在iframe下，以及上面的圖像..所以你需要絕對定位..這樣重疊的圖像更像邊界..

此外還有另一種解決方案，允許點擊div的，發現在jquery插件。我查一下，如果我能找到它..

編輯

以下是說明了如何通過的div cliking工作的網站：

http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html

來源

2011-06-09 17:43:16

您正在鋪設在上面的DIV的地圖，因此您使用Google Maps Javascript時，將無法檢測到與之相關的點擊/互動，因爲您實際上是點擊DIV而不是地圖。

不要認爲你想要實現的是可能的。我能看到的最好的折衷辦法是在盒子外面有粗糙的邊框，但保持邊框的內邊緣仍然是方形的。在父DIV上設置背景圖像，並將地圖放置在div中間的頂部。像這樣的東西...

<div style="background:url(image.jpg); padding:20px"> 
    <iframe /> 
</div>

來源

2011-06-09 17:45:54 addedlovely

哦，是的啊，或@Tim說，將邊界分成四邊，儘可能地裁剪圖像，然後放在上面。 – addedlovely 2011-06-09 17:46:59

在css中通過重疊div來製作自定義圖像幀，但無法再訪問該圖像

回答

相關問題