WordPress & Webwork

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.

5 Reaktion(en)

  1. Pingback: Jeena Paradies

  2. Kai Greve

    Die Faszination für diese technische Spielerei kann ich gut nachvollziehen, da DHTML wirklich eine spannende Technologie ist. Eine sinnvolle Anwendung für diese Art Layer fällt mir allerdings nicht, da sie auch ohne Werbung nerven.

    Webseiten, die Werbung auf diese Weise einbinden, meide ich. Und Firmen, die auf diese Weise meine Aufmeksamkeit haben wollen, machen sich bei mir dadurch unbeliebt. Ich finde Werbung, die in einem sinnvollen Zusammenhang zur Website steht und sich unaufdringlich anbietet, wesentlich ansprechender.

  3. Daniele

    War zu erwarten, nachdem der IE jetzt ja auch Popups blocken kann.
    Ich schätze wenn sich das verbreitet wird es sehr schnell eine Extension für den FF geben (jaaa Perun, der Mozilla, falls er noch weiterentwickelt werden würde, könnte das alles von Haus aus.. :mrgreen:).

  4. Robert Lechner

    Nützlich mag es nicht auf den ersten Blick erscheinen. Aber auf dieser Seite http://www.nanosite.co.uk zeigt sich die Stärke einblendbarer DIVs. Die Newsauswahl erscheint nur, wenn man mit der Maus über das Eselsohr in der oberen Seite fährt. Gelöst mittels CSS (:hover), ohne Javascript und nur mit Userinteraktion (also nicht automatisiert), aber sehr funktionell und praktisch.

  5. Michael

    Hallo,

    @Robert Lechner:
    ganz ohne JavaScript ?! Und doch wird auf dieser Seite ein JScript eingebunden. Zumindest ist das für den IE nötig, da er ja nicht generell :hover versteht…

    Gruß, Micha

Die Kommentare in diesem Beitrag sind geschlossen.