Werbeunterbrechung statt Bannerwerbung

Webdesign

10.3.2008 von Redaktion pcmagazin und Volker Hinzen

Pop-ups gehören endgültig auf die Out-Liste der Werbemechanismen. Der Trend geht in Richtung geschickt eingeblendete Werbefläche, die zum Beispiel eine Webseite unterteilen.

ca. 3:25 Min
Ratgeber
  1. Webdesign
  2. Teil 2: Webdesign
Werbeunterbrechung statt Bannerwerbung
Werbeunterbrechung statt Bannerwerbung
© Archiv

Werbeunterbrechung statt Bannerwerbung

Pop-ups gehören endgültig auf die Out-Liste der Werbemechanismen. Der Trend geht in Richtung geschickt eingeblendete Werbefläche, die zum Beispiel eine Webseite unterteilen.

Werbeunterbrechung statt Bannerwerbung
© Archiv

Sie kennen die Technik sicher von vielen Zeitungsportalen. Die Webseite baut sich auf und plötzlich taucht eine Animation direkt auf der Seite auf, fliegt nach rechts, verlässt den Contentbereich und kommt neben dem eigentlichen Inhalt zur Ruhe, um die Werbebotschaft zu präsentieren. Oft ist auch der vertikale Ablauf der Webseite durch einen schmalen Kasten unterbrochen, der rechts neben dem Inhalt in einen vertikalen Kasten übergeht. Der Anschein entsteht, als läge ein großes Bild teilweise durch die Webseite verdeckt hinter dem Content.

Fünf DIV-Container

Diese Art der Werbeunterbrechung kann mit der geschickten Positionierung von DIV-Containern erreicht werden. Im Bild sehen Sie das Ergebnis. Die Webseite ist scheinbar in der Mitte durchgerissen, der untere Teil nach unten verschoben. Im Zwischenraum und rechts des Inhaltes erkennen Sie die komplette Anzeige. Um Spannung aufkommen zu lassen, wird die Anzeige nicht gleich auf dem Bildschirm präsentiert, vielmehr läuft sie nach dem Ladevorgang langsam von links in die Webseite hinein bis sie ihre endgültige Position erreicht hat. Die eigentliche Werbebotschaft taucht erst auf, wenn die Anzeige breite wird als die Webseite selbst ist.

Für dieses Beispiel benötigen Sie insgesamt fünf DIV-Container, die wie ein Puzzle im Browser zusammengesetzt sind. Der erste Container (ID=contentoben) enthält die Inhalte, die oberhalb der Werbung gezeigt werden sollen. Er ist 630 x 250 Pixel groß und kann mit beliebigem HTML-Code gefüllt werden. Dasselbe gilt für den Container, der die Webseiteninhalte unterhalb der Werbung beinhaltet. Er ist ebenfalls 630 Pixel breit, eine Höhe wird ihm nicht zugewiesen, da offen gehalten werden soll, wie viel Inhalt hier gezeigt werden soll. Um Raum für die Werbeunterbrechung zu garantieren, ist die Höhe des zweiten DIV-Containers per CSS-Eigenschaft 250 Pixel unterhalb der unteren Kante des oberen Inhalts-DIVs gesetzt.

Die Seite wird durchgerissen

Der Effekt der durchgerissenen Seite wird mit zwei weiteren DIVs realisiert. Sie sind ebenfalls 630 Pixel breit, aber nur 20 Pixel hoch. Ihr Inhalt ist ein transparentes GIF. Das ist in der Bildbearbeitung schnell erzeugt. Legen Sie dazu einfach ein neues Bild mit den Maßen 630x20 Pixel an. Mit der Freihandmarkierung zeichnen Sie eine zerhackelte Linie im Innenraum des Bildes und schließen die Markierung an den Seiten des Bildes ab. Füllen Sie die Markierung mit derselben Farbe, die auch der Hintergrund der Inhalt-DIVs besitzt. Die restliche Fläche füllen Sie mit einer beliebigen anderen Farbe. Sie können nun das Bild in 256 Farben konvertieren und als GIF-Bild abspeichern. Achten Sie darauf, dass Sie die beliebig gewählte Farbe vor dem Speichern auf transparent setzen.

Werbeunterbrechung statt Bannerwerbung
Werbung hinter einer zerrissenen Seite: Mit Divs und CCS kein Problem.
© Archiv

Das so gesicherte Bild wird nun vertikal gespiegelt und in gleicher Weise unter einem anderen Namen gesichert. Sie haben nun zwei GIF-Grafiken, die den gezeichneten Abriss einmal im oberen, einmal im unteren Bereich des Bildes zeigen.

Die GIF-Bilder landen als Hintergrundgrafiken in den DIV-Containern drei und vier. Diese sind über CSS so präzise platziert, dass sie exakt unterhalb des oberen Inhalt-DIVs und oberhalb des unteren Inhalt-DIVs erscheinen. Die relativ schmale Höhe von 20 Pixeln ist absichtlich so klein gehalten. In diesen DIVs können keine Inhalte der Webseite eingeblendet werden. Wären die DIVs höher, so entstünde der übertriebene Eindruck einer großen Freifläche auf der Webseite.

"Einfliegen" der Werbung

Der fünfte DIV-Container ist für die Anzeige zuständig. Er ist 800 Pixel breit und damit 170 Pixel breiter als der Contentbereich. Dieser Überhang erscheint rechts neben dem Content und kann die Werbebotschaft enthalten. Die Links-Position dieses DIV-Containers wird zunächst auf -800px gesetzt. Damit ist die komplette Anzeige beim Start der Seite nicht sichtbar, der Container klebt quasi links vom Browserfenster.

Über die CSS-Eigenschaft "z-index : 0;" positionieren Sie diesen fünften Container hinter die anderen vier, die jeweils mit "z-index:1;" eine Schicht nach oben gelegt werden.

Das Einfliegen der Anzeige geschieht über ein kleines JavaScript. Im Body-Tag wird per On-Load-Event die Funktion "start()" aufgerufen. Diese Funktion ruft eine weitere Funktion namens "verschieben()" per Intervall auf. Die Intervall- Abstände sind mit einer Hundertstelsekunde sehr kurz gewählt, da die Anzeige Pixel für Pixel in die Webseite geschoben werden soll. Das ergibt eine sanfte Animation.

Die aktuelle linke Position des DIV-Containers speichert das Skript in der Variablen "links". Diese ist anfangs auf -800 gesetzt, entspricht also der Position, die über die CSS-Klasse definiert wurde. Bei jedem Durchlauf der Funktion "verschieben()" erhöht sich "links" um 1. Sobald "links" den Wert 0 erreicht hat, ist die Anzeige vollständig auf der Webseite zu sehen. In diesem Fall wird das Intervall gestoppt, damit die Anzeige nicht rechts aus dem Bild verschwindet.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.