html - 带有 z-index 的交互式 HTML 底层

Question

如果显示框架图像，我们能否使以下 Google map 具有交互性。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />

<div style="position: absolute; z-index: 1;">
    <iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&amp;aq=&amp;sll=43.656877,-79.32085&amp;sspn=0.852471,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&amp;t=m&amp;z=14&amp;ll=43.67111,-79.395217&amp;output=embed&iwloc=near" ></iframe>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
    <small><a href="https://maps.google.ca/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&amp;aq=&amp;sll=43.656877,-79.32085&amp;sspn=0.852471,2.113495&amp;ie=UTF8&amp;hq=&amp;hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&amp;t=m&amp;z=14&amp;ll=43.67111,-79.395217" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small>
</div>

<div style="position: absolute; color:red; z-index: 2" id="frame_image">
    <img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>

代码也在以下链接中: http://jsfiddle.net/pPrZV/

如果有任何其他方式通过 Google Maps API 等，请告诉我。谢谢

Answer 1

只需将此样式应用于 <iframe>谷歌地图

<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...

Working jsFiddle here