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.

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:

<style type="text/css">
<!-
#thePopupElement {position:absolute; 
   height:1; width:1; top:0; left:0;}
->
</style>
	

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:

var gPopupTime=2;  // Zeit, während der das 
   Element erscheint (Sekunden)
var gChancePopup=1; // Hilfsvariable für 
   Zufallszahlengenerator
var gPopupCount=0; // Zähler für repetitiven
   Aufruf der showPopup-Funktion
	

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:

var isNS=(document.layers);
var isIE=(document.all);
var isW3C=(document.getElementById && !isIE);
	

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:

function initPopup(){
   if(!isNS && !isIE && !isW3C) return;
   if(isIE)       popupDiv=eval('document.all. 
                   thePopupElement.style');
   else if(isNS)	 popupDiv=eval('document.
                   layers["thePopupElement"]');
   else if(isW3C) popupDiv=eval('document.
                   getElementById("thePopup
                   Element").style');
                   
   randPopup=Math.ceil
   (Math.random()*chancePopup);
   if (isIE||isW3C) popupDiv.visibility= 
   "visible";
   else popupDiv.visibility ="show";
   if(randPopup==1) showPopup();
}

	

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:

function showPopup(){
if(gPopupCount<gPopupTime*10) {
   gPopupCount+=1;
   if (isIE){
      documentWidth  =document.body.offset      
      Width/2+document.body.scrollLeft-20;
      documentHeight =document.body.offset
      Height/2+document.body.scrollTop-20;

   }	
   else if (isNS){
      documentWidth=window.innerWidth/
      2+window.pageXOffset-20;
      documentHeight=window.innerHeight/
      2+window.pageYOffset-20;
   } 
   else if (isW3C){
      documentWidth=self.innerWidth/
      2+window.pageXOffset-20;
      documentHeight=self.innerHeight/
      +window.pageYOffset-20;
   } 
   popupDiv.left=documentWidth-100;
   popupDiv.top =documentHeight-100;
   setTimeout("showPopup()",100);
   }
else closePopup();
}

	

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:

function closePopup(){
if (isIE||isW3C) popupDiv.display="none";
else popupDiv.visibility ="hide";
}
	

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:

onLoad=initPopup;
	

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:

<div id="thePopupElement"
   style="visibility:hidden">
<!- hier wird der Inhalt des Popup-Elements
   eingefügt; alle HTML-Möglichkeiten stehen 
   offen ->
<table border="4" bgcolor="#FFFF00" 
   bordercolor="#0000FF" width="200" height= 
   "175" cellpadding="4" cellspacing="0">
<tr>
<td align="center" valign="middle"> 
<div align="center"><font color="#FF0000" 
   size="5" face="Geneva, Arial, Helvetica, 
   san-serif"><strong>Sensationell: InfoWeek
   ab sofort auf giftgrünem Papier!
   </strong></font> </div>
</td>
</tr>
</table>
</div>