Home/ Questions/Q 6000633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:43:18+00:00

I’m trying to make a custom, irregular frame for a google maps iframe. You

  • 0

I’m trying to make a custom, irregular frame for a google maps iframe. You can see my results so far here:

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

(please forgive the sloppy markup)
The only way I could think up of doing this was by having 1 div with the frame overlapping the div with the map like this

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

Unfortunately, if i do this i’m no longer able to interact with the map. I tried a slightly different method suggested in another thread ( http://www.cssbakery.com/2010/11/css-cookie-cutter-revisited.html ) but i get the same results
Any suggestions? thanks everyone

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use 4 images instead of one.. The div holding the images must be under the iframe, and the images above.. So you need absolute positioning for it.. That way the overlapping images are more border-like..

    Also there is another solution that allows clicking through div’s, found that in a jquery plugin. I’ll check if I can find it..

    EDIT

    Here is a site which explains how cliking through divs works:

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

    • 0