Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dirk Metzmacher 10. September 2003

Javascript – Praxis

Kein Beitragsbild

Neue Werbeformen müs­sen her. Die alten Banner oder PopUps ner­ven jeden und haben kaum noch Wirkung. Statt auf­wän­di­ger Rich-Media-Formate reicht auch ein ein­fa­ches JavaScript. Es stellt Besucher wie Sponsoren zufrie­den.

Live Demo

Die Werbung selbst besteht aus einer Tabelle mit Text. Natürlich kön­nen Sie auch Links oder Bilder ein­fü­gen. Die Tabelle ist von einem DIV-Tag ein­ge­schlos­sen und wird durch style=“visibility:hidden” nicht ange­zeigt. Dies ändert sich erst mit dem Befehl onload=initWerbung; im eigent­li­chen Script.

Diesen Teil kopie­ren Sie bit­te inklu­si­ve 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 nach­fol­gen­de 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 lan­ge die Werbung ange­zeigt 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 wei­ter unten im Script wird die Funktion initWerbung aus­ge­löst und die Werbung gestar­tet.

       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 wie­der­um die Funktion zeigWerbung aus, die unter ande­rem 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 ange­zeigt wer­den. Die 10 Sekunden wur­den durch die Variable Werbezeit fest­ge­legt.

Wie aber soll der Computer wis­sen, wann die­se Zeit abge­lau­fen ist? Hier wur­de durch setTimeout bestimmt, dass die Funktion zeigWerbung solan­ge aus­ge­führt wird, bis der Wert 100 erreicht ist, was inner­halb der Funktion errech­net wird. Dann wird die Funktion Werbung_weg gestar­tet.

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

Das Auslösen die­ser Funktion läßt die Werbung ver­schwin­den.

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

Wie bereits mehr­fach oben im Texte erwähnt, wird bei dem Laden der Seite die Funktion initWerbung aus­ge­löst.

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

Hoffen wir, dass den Sponsoren der neue Werbestil gefällt und die Kunden die Notwendigkeit tole­rie­ren.

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.

Schreibe einen Kommentar

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