Dirk Metzmacher 10. September 2003

Javascript – Praxis

Kein Beitragsbild

Neue Werbeformen müssen her. Die alten Banner oder PopUps nerven jeden und haben kaum noch Wirkung. Statt aufwändiger Rich-Media-Formate reicht auch ein einfaches JavaScript. Es stellt Besucher wie Sponsoren zufrieden.

Live Demo

Die Werbung selbst besteht aus einer Tabelle mit Text. Natürlich können Sie auch Links oder Bilder einfügen. Die Tabelle ist von einem DIV-Tag eingeschlossen und wird durch style=“visibility:hidden“ nicht angezeigt. Dies ändert sich erst mit dem Befehl onload=initWerbung; im eigentlichen Script.

Diesen Teil kopieren Sie bitte inklusive der DIV-Tags in den <body>-Tag Ihrer HTML-Seite.

  <div id="SponsorWerbung" style="visibility:hidden">
  <table width="450" height="350" bgcolor="#333333"><tr><td>
  <table width="445" height="345" bgcolor="#FFFF00"><tr><td align="center"
  >
  <p><b>Bundle: 300 Tricks - VOL 1.0 + Dr. Web CD-ROM 1.3</b><br><br>
  Aktion bis 12.8.2002: Den Dr. Web Kaffeebecher gibt's GRATIS dazu!<br>
  300 Tricks und keiner weniger...,..., ohne lange Vorreden. Gelb gewinnt!
  </p><p><b>Bitte nehmen Sie sich die Zeit unsere Angebote zu
  erforschen.</b></p>
  <p>(Diese Werbung schließt sich in wenigen Sekunden von selbst)</p><br>
  </td></tr></table></td></tr></table>
  </div> 

Das nachfolgende JavaScript gehört in den <head>-Bereich Ihrer Homepage.

       <style type="text/css">
  <!--
  #SponsorWerbung {position:absolute; height:1; width:1; top:0; left:0;}
  -->
  </style>
  <SCRIPT LANGUAGE="JavaScript1.2"> 

Die Variable Werbezeit bestimmt, wie lange die Werbung angezeigt wird. Gezählt wird in Sekunden.

       Werbezeit=10; 
  Werbezahl=1;
  var ns=(document.layers);
  var ie=(document.all);
  var w3=(document.getElementById && !ie);
  adCount=0;
  

Durch onload weiter unten im Script wird die Funktion initWerbung ausgelöst und die Werbung gestartet.

       function initWerbung(){
  if(!ns && !ie && !w3) return;
  if(ie) adDiv=eval('document.all.SponsorWerbung.style');
  else if(ns) adDiv=eval('document.layers["SponsorWerbung"]');
  else if(w3) adDiv=eval('document.getElementById
  ("SponsorWerbung").style');
  randAd=Math.ceil(Math.random()*Werbezahl);
  if (ie||w3)
  adDiv.visibility="visible";
  else
  adDiv.visibility ="show";
  if(randAd==1) zeigWerbung();
  } 

Die Funktion initWerbung löst wiederum die Funktion zeigWerbung aus, die unter anderem die Position der Werbung bestimmt.

       function zeigWerbung(){
  if(adCount<Werbezeit*10){adCount+=1;
  if (ie){documentWidth =document.body.offsetWidth/
  2+document.body.scrollLeft-20;
  documentHeight =document.body.offsetHeight/
  2+document.body.scrollTop-20;}
  else if (ns){documentWidth=window.innerWidth/
  2+window.pageXOffset-20;
  documentHeight=window.innerHeight/
  2+window.pageYOffset-20;} 
  else if (w3){documentWidth=self.innerWidth/
  2+window.pageXOffset-20;
  documentHeight=self.innerHeight/
  2+window.pageYOffset-20;} 
  adDiv.left=documentWidth-200;
  adDiv.top =documentHeight-200;
  

Die Werbung soll im Beispiel 10 Sekunden lang angezeigt werden. Die 10 Sekunden wurden durch die Variable Werbezeit festgelegt.

Wie aber soll der Computer wissen, wann diese Zeit abgelaufen ist? Hier wurde durch setTimeout bestimmt, dass die Funktion zeigWerbung solange ausgeführt wird, bis der Wert 100 erreicht ist, was innerhalb der Funktion errechnet wird. Dann wird die Funktion Werbung_weg gestartet.

       setTimeout("zeigWerbung()",100);}else Werbung_weg();
  } 

Das Auslösen dieser Funktion läßt die Werbung verschwinden.

       function Werbung_weg(){
  if (ie||w3)
  adDiv.display="none";
  else
  adDiv.visibility ="hide";
  } 

Wie bereits mehrfach oben im Texte erwähnt, wird bei dem Laden der Seite die Funktion initWerbung ausgelöst.

       onload=initWerbung;
    //End-->
    </script>

Hoffen wir, dass den Sponsoren der neue Werbestil gefällt und die Kunden die Notwendigkeit tolerieren.

Dirk Metzmacher

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.