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:

<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>
	

Das wandernde Banner

Werbebanner am oberen Seitenrand haben, vom Werbetreibenden aus gesehen, einen Nachteil: Beim Weiterscrollen verschwinden sie. Es geht aber auch anders: Unser Script zeigt, wie sich mit wenig Aufwand ein Element auf die Seite bringen lässt, das mit dem Seiteninhalt wandert und permanent sichtbar bleibt - im Fall eines Werbebanners mag dies aufsässig erscheinen; mit der selben Methode lassen sich aber auch nützliche Elemente wie mitwandernde Menüs oder Toolbars auf die Seite bringen.

1. Definition des wandernden Inhalts: In diesem Beispiel wird der Inhalt des wandernden Elements gleich zu Beginn in der JavaScript-Variablen theHTMLElement festgelegt. Auch hier kann es sich um eine Tabelle oder beliebigen anderen HTML-Code handeln. Mit dem optionalen href-Link verzweigt der Browser beim Anklicken des Elements zur angegebenen URL:

var theHTMLElement="<table border= 
   0><tr><td><a href=http://www.infoweek.ch> 
   <img border=0 src=images/bestehendes_
   banner.gif></a></td></tr></table>"
	

2. Definition von Variablen und Browser-Erkennung: Mit elementLeft und elementTop definieren wir die Position, die das Element aus der Sicht des Surfers im Anzeigebereich des Browser-Fensters einnehmen und wo es auch bleiben soll. Die Werte könnten auch direkt im document.write-Befehl von Schritt 3 plaziert werden - damit sie sich unkompliziert in einem Schritt ändern lassen, ist es jedoch besser, dafür Variablen zu verwenden. Dabei dienen displayLeft und displayTop dazu, die Position des Ursprungs der oberen linken Ecke des Anzeigebereichs ("sichtbare" Koordinaten 0,0) in Abhängigkeit des gerade im Fenster angezeigten Scroll-Ausschnitts relativ zu den gesamten Dimensionen des HTML-Dokuments zu berechnen.

var elementLeft=20;
var elementTop=300;
var displayLeft=0;
var displayTop=0;

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

3. Einfügen des Elements in den HTML-Text: Diesmal fügen wir das DIV-Element (für Internet Explorer und W3C-konforme Browser) oder den Layer (für Netscape 4) mit einem document.write-Statement in das HTML-Dokument ein, den der Webserver zum Browser übermittelt. Die ID des Elements muss mit dem Namen übereinstimmen, der in den Funktionen moveElement und closeElement verwendet wird. Mit dem optionalen onClick-Handler kann der Surfer das Element entfernen.

if (isNS)
{document.write('<layer name="theWandering
   Element" onClick="closeElement();"
   top='+elementTop+' left='+elementLeft
   +'>'+theHTMLElement+'</layer>')
}
else
{document.write('<div id="theWandering
   Element" onClick="closeElement();" 
   style="position:absolute;top:'+element
   Top+';left:'+elementLeft+'">'+theHTML
   Element+'</div>')
}
	

4. Adjustieren der Position: Die Funktion moveElement lässt das Element wandern, indem sie dessen linke obere Ecke so verschiebt, dass sie stets auf den in elementLeft und elementTop festgelegten sichtbaren Koordinaten zu liegen kommt - egal, wie weit die Seite gerade gescrollt ist: Die Koordinaten eines DIV beziehungsweise Layers müssen stets relativ zum Beginn des Dokuments angegeben werden und nicht etwa relativ zum Beginn des sichtbaren Scroll-Ausschnitts. Deshalb ermittelt moveElement aus den Angaben, die der Browser über die Scrollposition liefert, die Differenz (ydiff und xdiff) zwischen der gewünschten Position im Browser-Fenster (elementTop und elementLeft) und der absoluten Position im gescrollten Gesamtdokument (displayTop und displayLeft), subtrahiert diese von den vorherigen Werten der absoluten Position und legt diese neu fest. Zum Schluss wird die Position des wandernden Elements aus der Summe der gewünschten und der neuen absoluten Position bestimmt - je nach DOM mit einem von drei verschiedenen Statements:

function moveElement(){
if(isIE)
   {ydiff=displayTop-document.body.scrollTop;
   xdiff=displayLeft-document.body.scrollLeft;
}
else
	{ydiff=displayTop-pageYOffset;
	xdiff=displayLeft-pageXOffset;
}

if(ydiff!=0)
	{movey=Math.round(ydiff/10);
	displayTop-=movey;



}
if(xdiff!=0)
   {movex=Math.round(xdiff/10);
   displayLeft-=movex;
}

if(isNS)
   {document.layers.theWanderingElement.top=
   displayTop+elementTop;
   document.layers.theWanderingElement.left= 
   displayLeft+elementLeft;
}

if(isIE)
   {document.all.theWanderingElement.style.top=
   displayTop+elementTop;
   document.all.theWanderingElement.style.left=
   displayLeft+elementLeft;
}

if(isW3C)
   {document.getElementById("theWandering
   Element").style.top=displayTop+elementTop;
   document.getElementById("theWandering
   Element").style.left=displayLeft+
   elementLeft;
}
}
	

5. Element schliessen: Die Funktion closeElement, aufgerufen durch den optionalen onClick-Handler im wandernden Element, macht das Element beim Anklicken unsichtbar:

function closeElement(){
if(isIE) {
   
wanderingElement=eval('document.all.
   theWanderingElement.style');
   wanderingElement.display="none";
	}
else if(isNS) {
   wanderingElement=eval('document.layers
   ["theWanderingElement"]');
   wanderingElement.visibility="hide";
	}
else if(isW3C) {
   wanderingElement=eval('document.get
   ElementById("theWanderingElement").style');
	wanderingElement.display="none";
	}
}
	

6. Periodischer Aufruf von moveElement: Mit setInterval (entspricht setTimeout aus dem ersten Beispiel) wird ein JavaScript-Statement automatisch immer wieder in bestimmtem Abstand ausgeführt. Das Intervall wird im zweiten Parameter in Millisekunden angegeben; in unserem Beispiel sind es zehn Millisekunden. Je kleiner dieser Wert, desto fliessender bewegt sich das Element. Im Body der HTML-Seite müssen zur Anzeige des wandernden Elements keine weiteren Statements eingefügt werden; wir haben ja den gesamten benötigten Code bereits in Schritt 3 per document.write eingefügt:

theMove=setInterval("moveElement()",10);
	

Mit diesem Befehl endet das JavaScript, das wiederum zwingend mit dem </script>-Endbefehl abgeschlossen werden muss.

Die im Artikel aufgeführten Code-Listings stehen in der Infoweek-Library zum Download bereit.