Vor kurzem wurde ich von den lieben Kollegen auf einen interessanten Link aufmerksam gemacht. Hinter einer verkürzten URL verbarg sich ein Fachartikel einer großen Zeitung und darüber schwebte ein Layer mit einem Empfehlungstext des verlinkenden. Nach kurzem Erstaunen und ein wenig Investigation war der Trick schnell erkannt. Auf der Seite befand sich ein IFrame mit dem eigentlichen Artikel und darüber lag ein absolut positioniertes Div mit dem Empfehlungstext.
Der Effekt ist ebenso einfach wie beeindruckend und auch wenn die untersuchte Lösung einige Tricks und Kniffe wie eine extrem kurze Url oder eine verschlüsselte Zielseite aufweist, möchte ich euch Heute zeigen, wie man ein solches System mit wenig Aufwand selbst programmieren kann.
Leider kann ich mich nicht mehr an den Original-Link erinnern. Sollte der kreative Autor sich hier also wiedererkennen, möge er sich bitte melden 
EDIT: Der ursprüngliche Autor ist Hagen Stoll und seine Version kann unter dieser URL bestaunt werden. Danke dafür!
Jetzt aber zu dem was ihr sicher schon seit der ersten Zeile sehen wollt … Quellcode!
Zunächst müssen wir dafür sorgen, dass der IFrame möglichst deckend angezeigt wird. Dazu setzen wir die Abstände und die Größe der äußersten Elemente html und body sowie des IFrame.
html, body, iframe {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
Anschließend fügen wir das Div hinzu und positionieren es mittig auf der Seite.
<div id="overlay">Here be dragons!</div>
#overlay {
position: fixed;
left: 50%;
top: 50%;
width: 320px;
height: 320px;
margin-left: -160px;
margin-top: -160px;
z-index: 1000;
background-color: #ccc;
}
Zu guter letzt sollten wir dem Nutzer noch die Möglichkeit geben das Overlay wieder zu entfernen. Dazu öffnen wir einfach wieder die Seite aus dem IFrame im Hauptfenster. Da die Seite schon im Cache liegen sollte, ist für den Nutzer keine Verzögerung spürbar.
<a id="closebutton" href="http://www.example.com/" target="_top">Hinweismeldung schließen</a>
Jetzt machen wir die URL noch mit etwas PHP dynamisch und schon haben wir eine generische Empfehlungsseite. Der komplette Quellcode sieht dann so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Race of Robots präsentiert <?php echo $_GET['u']; ?></title>
<style type="text/css">
html, body, iframe {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%
}
#overlay {
position: fixed;
left: 50%;
top: 50%;
width: 320px;
height: 320px;
margin-left: -160px;
margin-top: -160px;
z-index: 1000;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="overlay">
Here be dragons!
<a id="closebutton" href="<?php echo $_GET['u']; ?>" target="_top">Hinweismeldung schließen</a>
</div>
<iframe src="<?php echo $_GET['u']; ?>"></iframe>
</body>
</html>
Eine kleine, etwas aufgemotzte Demo der Anwendung findet Ihr im Tools Bereich dieser Seite. EDIT: Leider ist das Script beim Serverumzug verloren gegangen 
Für Anregungen, Kommentare oder Beschimpfungen bin ich wie immer gerne zu haben
An dieser Stelle noch mal vielen Dank an Maike und Matthias für den Hinweis und die Ermutigung