Ausgefranste Banner selbst gemacht

von Fries Websolutions

Wenn Standard-Bannerformate doch immer seltener angeklickt werden, dann brauchen wir innovativere Konzepte die sich besser gestalten lassen und mehr Informationen zeigen können als die üblichen 468x60 Pixel. Aber mit DHTML-Containern, oder Shape-Bannern steht der Ersatz schon bereit. Wie machen wir das eigentlich?

Hier die Vorteile: auf unserer Webseite muss kein extra Platz für den Werbebanner gelassen werden. Denn der werden wir einfach über den Inhalt platzieren und verdeckt ihn kurzzeitig. Aber bei öfterem Gebrauch, wird das so manchen Leser verärgern, denn die können die Inhalte der Seite vorübergehend nicht mehr lesen.

Aber die Banner werden trotz PopUp-Blocker angezeigt und lassen sich auch noch äußerst flexibel gestalten. Die werden fast nie als rechteckige Werbekästen angezeigt, doch meist haben sie eine ganz eigene Form, die unsere Webseite wirklich nur dort überlagert, wo auch tatsächlich Werbung gezeigt wird.

Um den überflüssigen Hintergrund der Banner durchsichtig zu machen, da haben wir mehrere Möglichkeiten. Wir können ein reines Flash-Banner genau so gut nutzen, wie ein transparentes GIF, oder PNG-Bild. Wir können auch komplexe Slice-Konstruktionen zur Kombination von beidem verwenden

Die Genauigkeit unserer Imagemap hängt von der Sorgfältigkeit schon bei unserer Erstellung ab. Dazu helfen uns spezielle Programme, oder Funktionen, wie die eigentlich jeder bessere Editor schon mitbringt, damit wir nicht jede Koordinate einzeln suchen müssen.


Das Banner erkennen wir über die: ID "werbung" und können es per Javascript anzeigen und auch wieder verschwinden lassen.

function startbanner() {
var x = document.getElementById("werbung");
setTimeout('document.getElementById("werbung").style.visibility = "visible";',1500);
}
function endebanner() {
var x = document.getElementById("werbung");
x.style.visibility = "hidden";
}

Bei dem Start wird per: setTimeout der Banner erst nach kurzer Pause angezeigt. Dadurch erhält er auch garantiert die volle Aufmerksamkeit des Besuchers. Aber wer das nicht möchte, der sollte nur den Inhalt der setTimeout-Anweisung zwischen den einfachen Anführungszeichen nutzen. Doch für eilige Besucher ist die Schließen-Funktion gedacht, denn die lässt das Banner auf Knopfdruck unsichtbar werden. Wenn diese vergessen wird, dann können wir den sinkender Besucherzahlen recht sicher sein: denn zum guten Ton gehört ,die Schließen-Funktion auf jeden Fall dazu.

Gesamter Quelltext:

<HTML><head>
<script language="Javascript" type="text/javascript">
function startbanner() {
var x = document.getElementById("werbung");
setTimeout('document.getElementById("werbung").style.visibility = "visible";',1500);
}
function endebanner() {
var x = document.getElementById("werbung");
x.style.visibility = "hidden";
}
</script>
</head>
<body onload="startbanner()">

<div style="width:460px; font-family: arial; font-size: 12px;">
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget ligula eget nisl tempus cursus.
</div>

<div id="werbung" style="position:absolute;top:50;left:100;visibility:hidden;">
<img src="images/shapedbanner.gif" usemap="#banner" border=0>
<map name="banner">
<area shape="poly" coords="10, 20,40 " href="http://www.auktion-forum.info" target="_blank">
<area shape="rect" href="javascript:endebanner();" alt="Werbefenster schließen ">
</map>
</div>
</body>
</HTML>

Diese DHTML-Werbung wird geteilte Freuden auslösen, aber sie rückt durch die zunehmende Verbreitung von PopUp-Blockern, doch immer stärker als Alternative in den Blickpunkt.

 

 
   Anzeigen