Werbeunterbrechung statt Bannerwerbung

Teil 2: Webdesign

  1. Webdesign
  2. Teil 2: Webdesign

Die Anzeige verschwindet

Als besonderen Service bietet das Skript dem Besucher der Webseite an, die Anzeige auszublenden, wobei sich der Inhalt der Webseite neu zusammensetzt. Der Zwischenraum verschwindet, die Anzeige auch und die Webseite sieht aus als wäre sie niemals unterbrochen gewesen.

Werbeunterbrechung statt Bannerwerbung

© Archiv

Werbung hinter einer zerrissenen Seite: Mit Divs und CCS kein Problem.

Zuständig für diesen Service ist die Funktion "zusammenfuegen()". Der Aufruf dieser Funktion wird per OnClick-Methode generiert. Die DIV-Definition im HTML-Code wird um On- Click ergänzt und das Event mit "zusammenfuegen()" verknüpft.

Die Funktion selbst hat nicht viel zu tun. Sie setzt die Visible-Eigenschaft des Anzeigen- Containers ebenso auf "hidden" wie Visible-Eigenschaften der DIV-Container, die die Abriss-Grafiken zeigen. Diese drei DIVs verschwinden darauf von der Bildschirmfläche. Schließlich muss die Funktion die beiden übrig gebliebenen DIV wieder zusammenrücken. Dabei wird der Höhenparameter des unteren Inhalt-DIVs verändert, sodass die beiden DIVs aneinanderkleben.

Da die Inhalte in den DIVs sich an die neue Positionen des Rahmens anpassen, sieht die Webseite nach getaner Funktionsarbeit so aus, als hätte sie niemals eine Werbeunterbrechung besessen.

Um Ihrem Besucher kundzutun, dass er die Werbung auch ausblenden kann, sollten Sie in der Anzeige an sichtbarer Position einen Schriftzug namens "Schließen" anbringen. Sie können das in der Bildbearbeitung durchführen. Dadurch, dass die gesamte Fläche des DIVs mit der Schließfunktion verknüpft ist, muss der Besucher den vermeintlichen Hotspot nicht einmal genau treffen.

Anzeige ohne Animation

Sie können die Animation auch einfach aus der Seite entfernen, damit die Anzeige gleich zu Beginn auf der Webseite erscheint. Dazu setzen Sie den left-Parameter in der CSS-Klasse "werbung" gleich auf den Wert "0px". Aus dem Skript entfernen Sie bis auf die Funktion "zusammenfügen()" alle Programmzeilen. So kann der Besucher die Werbung weiterhin einfach ausblenden, wenn er sich dafür nicht interessiert.

Vergessen Sie nicht, den OnLoad-Befehl aus dem Body-Tag zu entfernen, sonst kommt es beim Start der Seite zu einer Fehlermeldung. Natürlich ist es mit dieser Anordnung von DIVs auch möglich, zunächst die Anzeige in voller Pracht erscheinen zu lassen und nach Anklicken in den Hintergrund der Seite zu legen. Dazu müssen Sie lediglich die Funktion "zusammenfuegen()" ein wenig ändern. Vorher aber wird in der CSS-Klasse Werbung der z-Index auf 2 gelegt. Dadurch liegt das DIV mit der Werbung oben auf der Seite, verdeckt dabei natürlich die Inhalte.

Die OnClick-Methode ist weiterhin mit dem Anzeige-DIV verbunden. In der Funktion "zusammenfuegen()" könnte theoretisch nun der z-Index des Anzeige-DIVs auf den Wert "0" gesetzt werden. Das funktioniert aber nicht in allen Browsern. Um sicherzustellen, dass die Werbung wirklich überall bei Mausklick im Hintergrund verschwindet, werden deshalb die z-Index-Parameter der anderen vier DIV-Container auf den Wert "3" gesetzt. Die vier Container landen vor dem Anzeigen-DIV und der gewünschte Stapelzustand der Seite ist erreicht.

Und was ist mit Flash?

Kein Problem! Sie können den Anzeigen-Container auch mit Flash-Filmen füllen. Wenn Sie den Flashfilm so anlegen, dass freigestellte Motive auf einem transparenten Hintergrund bewegt werden, legen Sie das Anzeigen-DIV wie im zweiten Beispiel einfach in den Vordergrund der Seite. Die animierten Teile scheinen dann über den Inhaltsbereich bewegt zu werden und verdecken so nur die Bereiche, die sie einnehmen.

Das Skript

01 var links = -800;
02 var abstand;
03 function start()
04 {
05 abstand = setInterval('verschieben()',10);
06 }
07 function verschieben()
08
09 links++;
10 if (links==0)
11 {
12 clearInterval(abstand);
13 }
14 document.getElementById("schieb").style.left = links+ "px";
15 }
16 function zusammenfuegen()
17 {
18 document.getElementById("contenttrennerunten").style.visibility = "hidden";
19 document.getElementById("contenttrenneroben").style.visibility = "hidden";
20 document.getElementById("schieb").style.visibility ="hidden";
21 document.getElementById("contentunten").style.top ="250px";
22 }

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".