Javascript – Praxis
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.
