Muss Werbung immer stören?
Muss Werbung immer stören?
Die Online-Werbetreibenden klagen: Die klassische Bannerwerbung zieht nicht mehr. Aggressivere Werbeformen auf dem Web sind beim User unbeliebt - wie eine kürzliche InfoWeek-Umfrage zeigte, gilt dies allem voran für die sogenannten Superstitials: Zusätzliche Werbefenster, die ungefragt aufpoppen und dann am Bildschirm bleiben, sind äusserst unbeliebt. Sie werden zwar mit Sicherheit wahrgenommen, aber vornehmlich als Störung empfunden.
Selbst-deaktivierendes Popup-Element
Wesentlich angenehmer wäre es doch, wenn die Popup-Anzeige nach einer gewissen Zeit von selbst verschwinden und, statt in einem separaten Browser-Window, an zentraler Stelle innerhalb der eigentlichen Webseite erscheinen würde.
Mit etwas DHTML und JavaScript lässt sich ein solches selbst-deaktivierendes Popup-Element leicht realisieren - und es eignet sich nicht bloss für Werbezwecke, sondern zum Beispiel auch zur Anzeige wichtiger News oder für Hinweise auf aktualisierte Inhalte auf der Website. Und so wird es gemacht:
1. CSS-Stil definieren: Als erstes wird innerhalb des Head-Tag der Seite ein passender CSS-Stil für das in DIV-Form implementierte Popup-Element definiert. Das eigentliche DIV-Element im Body-Teil muss später die selbe ID wie dieser Stil erhalten, in unserem Fall heisst es thePopupElement:
|
2. Definition globaler Variablen: Die folgenden Schritte 2 bis 7 sind in JavaScript gehalten und müssen demnach allesamt in einen <script language="JavaScript1.2">-Befehl eingebettet werden. Zunächst definiert man drei Variablen:
|
3. Browser-Erkennung: Je nach Browser trifft man unterschiedliche JavaScript-Objektmodelle (DOM) an. Mit einem Test auf das Vorhandensein bestimmter Funktionen lässt sich ermitteln, welches Modell anwendbar ist: "document.layers" liefert nur im Netscape Navigator 4 und 5 eine gültige Antwort; document.all existiert in IE-Versionen ab 4. Ab Netscape 6 wird der W3C-Standard unterstützt, mit dem DHTML-Elemte über die Methode "getElementById" aufgerufen werden können. Die Variablen isNS, isIE und isW3C werden je nach Resultat der folgenden Abfragen auf true oder false gesetzt:
|
4. Initialisierung des Popup-Elements: Falls eine ältere Browser-Version vorliegt, wird das Element nicht angezeigt. Ansonsten lädt die folgende Funktion das im HTML-Body spezifizierte DIV-Element thePopupElement in ein DHTML-Objekt namens popupDiv - je nach DOM-Typ auf unterschiedliche Weise. Das Element - im HTML-Body per Default als unsichtbar spezifiziert - wird sodann über die Funktion showPopup für die gewünschte Zeit sichtbar gemacht:
|
5. Positionierung und zeitgesteuerte Anzeige: In der Funktion showPopup wird bei jedem Durchlauf ein Zähler erhöht und mit der in der Variablen gPopupTime festgelegten Gesamtanzeigezeit verglichen. Für den automatischen wiederholten Aufruf von showPopup sorgt das setTimeOut-Statement am Schluss der Funktion: setTimeOut ruft den als ersten Parameter angegebenen JavaScript-Befehl nach dem Verstreichen der in Millisekunden im zweiten Parameter definierten Zeit auf - also hier jeweils nach 100 Millisekunden oder einer Zehntelsekunde. Die Gesamtanzeigezeit, die wir zu Beginn in gPopupTime der Einfachheit halber in Sekunden angeben, muss zum Vergleich mit dem Zähler demnach mit 10 multipliziert werden. Die darauffolgenden Statements, einmal mehr nach DOM unterschiedlich, positionieren das angezeigte DIV-Objekt ungefähr in der Mitte des aktuell angezeigten Seiteninhalts, indem sie die top- und left-Eigenschaften des popUpDiv-Objekts entsprechend setzen. Bei der Festlegung von popupDiv.left und popupDiv.top müssen dazu die von documentWidth beziehungsweise documentHeight subtrahierten Werte etwa der Hälfte der Abmessungen des Popup-Elements entsprechen:
|
6. Hilfsfunktion zum Schliessen des Popup-Elements: Diese Funktion wird von showPopup dann aufgerufen, wenn die zugesprochene Gesamtanzeigezeit abgelaufen ist. Man könnte diese Statements auch direkt in die showPopup-Funktion einfügen; im Sinne funktional korrekt separierter Programmierung sollte jedoch wie in unserem Beispiel eine separate Funktion erstellt werden:
|
7. Aufruf der Popup-Anzeigefunktionen: Zum Schluss des Scripts wird der Anzeigevorgang mit dem Aufruf von initPopup beim Laden der Webseite in Gang gesetzt. Nach dem onLoad-Statement endet unser JavaScript mit dem </script>-Endbefehl:
|
8. Definition des DIV-Elements im HTML-Body: Hier werden das Erscheinungsbild und der Inhalt des Popup-Elements festgelegt. Dabei lässt sich frei schalten und walten - einzig die ID des Elements (hier: thePopupElement) muss mit der in initPopup und in der CSS-Stildefinition verwendeten Bezeichnung übereinstimmen.
Das Element selbst kann wie in unserem Fall eine HTML-Tabelle mit beliebigem Inhalt oder ein anderes HTML-Element vom simplen Text bis zum Flash-Movie sein. Achtung: Damit das DIV nicht permanent vom Browser, sondern nur durch unser JavaScript angezeigt wird, muss die Sichtbarkeit des Elements hier auf hidden gesetzt werden:
|