Overlay block on map in full-screen [#1237384]

Comment	File	Size	Author
#2	map-ad-example.png	98.31 KB	ressa

Comment #1

zzolo CreditAttribution: zzolo commented 5 August 2011 at 23:06

Hi @ressa. I am not really sure what this means and what this would be used for?

Log in or register to post comments

Comment #2

ressa CreditAttribution: ressa commented 6 August 2011 at 07:21

File	Size
map-ad-example.png	98.31 KB

Hey zzolo, I have attached a picture to clarify 8o)

Log in or register to post comments

Comment #3

zzolo CreditAttribution: zzolo commented 8 August 2011 at 20:52

Title:

Insert adsense block in full-screen map

» Overlay block on map in full-screen

Hi @ressa. Ah, I get it. Thanks for the screenshot. I have not tried to do this with fullscreen, though I have overlayed blocks on top of a map. I would assume this could be done with some CSS and possibly a little Javascript. May want to look at the fullscreen behavior (JS and CSS) to see what it is doing and how to supplement it. Might be necessary to implement your own behavior.

Log in or register to post comments

Comment #4

ressa CreditAttribution: ressa commented 9 August 2011 at 08:41

Yeah, an image speaks a thousand words 8o)
I am glad to hear you have earlier overlayed blocks on top of a map. I have come up with this snippet:

<div id="fullscreen_map" unselectable="on" style="z-index: 1011; position: absolute; right: 20px; top: 220px;">
  <div id="ad_fullscreen" style="height: 250px; opacity: 0.85; width: 140px;">
    <a href="test">ad script</a>
  </div>
</div>

It will overlay a block on maps, both normal maps and fullscreen, when inserted right after these div's, in the code (I used firebug to do this):

...

<div id="OpenLayers.Control.Permalink_298" class="olControlPermalink" style="position: absolute; z-index: 1009;" unselectable="on">...</div>
<div id="OpenLayers.Control.ScaleLine_300" class="olControlScaleLine olControlNoSelect" unselectable="on" style="position: absolute; z-index: 1010;">...</div>
<div id="fullscreen_map" style="z-index: 1011; position: absolute; right: 20px; top: 220px;" unselectable="on">...</div>

I actually don't mind if the block is shown on both small and fullscreen maps. You wouldn't still have that code lying around by any chance? 8o) Perhaps I can using it as a starting point and share the result in this thread, if I manage to get it to work.