DHTML-Container

Diese relativ neue Werbetechnik taucht unter verschiedenen Namen auf: DHTML-Layer, Flash-Layer, DHTML-Container etc. Es geht hier darum mittels DHTML (HTML, CSS und Java Script) z. B. eine Werbebotschaft oder zusätzlichen Inhalt auf der Website einzublenden ohne dafür ein Popup zu bemühen. Daher können die klassischen Popup-Blocker diese Technik nicht unterdrücken.

Ok, ich weiß das einige Leute solchen Techniken gegenüber sehr skeptisch und teilweise feindlich gegenüber stehen. Aber ich bin der Meinung daß diese Technik, wie übrigens das klassische Popup, an sich neutral ist. Was manche Betereiber daraus gemacht haben bzw. machen ist eine andere Geschichte.

OK, nun zu der Erstellung eines DHTML-Containers. Im Prinzip handelt sich hierbei um einen Div-Block in dem man verschiedenartige Inhalte (Text, Grafik, Flash etc.) unterbringen kann und nach einer bestimmten Zeitspanne oder Aktion des Besuchers soll dieser Block sichtbar werden. Ich werde hierbei ein mögliches Beispiel aufzeigen, welches für den Besucher eine nützliche Information bereithält.

Also erstellen wir zuerst einen Div-Block und fügen diesen in die Website ein:

<div class="info-box" id="info">
<h2>Die letzten Kommentare</h2>
<ul>
<li>Kommentar 1</li>
<li>Kommentar 2</li>
<li>Kommentar 3</li>
<li>Kommentar 4</li>
<li>Kommentar 5</li>
</ul>
<a href="javascript:schliessen()">Schließen</a>
</div>

Und jetzt geben wir die der Klasse info-box in der CSS-Datei die Formatierung:

.info-box {
position: absolute;
top: 50%;
left: 50%;
padding: 1em;
visibility: hidden;
z-index: 999;
}

Somit ist dieser Block standardmäßig unsichtbar. Falls er sichtbar wird, dazu später, dann wäre er absolut positioniert und würde mitten auf der Webseite erscheinen und zwar über all dem anderen Inhalt (z-index: 999;).

Jetzt kommt Java Script ins Spiel:

<script type="text/javascript">
var warten = setTimeout('anzeigen()',2000);
function anzeigen()
{
document.getElementById("info").style.visibility="visible";
}
function schliessen()
{
document.getElementById("info").style.visibility="hidden";
}
</script>

Dieses kleine Script kann man entweder im Kopfbereich der jeweiligen Seite einfügen oder in eine externe Datei auslagern. Und was bewirkt dieses Script? Das Script wartet 2000ms (2 Sekunden) und ruft dann die Funktion anzeigen() auf. Diese Funktion ändert in dem Container mit der Id=info den Wert von unsichtbar auf sichtbar. Somit erscheint die Info-Box auf der Website.

Wenn man auf den Link “Schließen” klickt, wird die Funktion schliessen() aufgerufen und dies ändert den visibility-Wert auf unsichtbar.

Hierbei sollte man natürlich erwähnen, daß diese Technik nicht funktioniert wenn Java Script im Browser deaktiviert ist. Auch in den Standardeinstellungen von Win XP SP2 für Internet Explorer wird diese Technik ebenfalls geblockt (zumindest war es bei mir so). Und wenn man in Mozilla oder Mozilla-Firefox den Flash-Blocker installiert hat, dann werden die “Flash-Layer” ebenfalls geblockt.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• Keine verwandten Beiträge