WordPress & Webwork - perun.net

DHTML-Container

Vladimir am 04. 06. 2005 um 11:03 Uhr

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.

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

  • Keine verwandten Artikel gefunden
Kategorien:
PHP & JS, Webwork
Tags:
 
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

5 Kommentare

  1. 1. – Jeena Paradies

    Trackback vom 04. June 2005 um 11:54

    Werbe Layer ziehen sich über das ganze Fenster

    Anstatt PopUps werden wohl jetzt schöne große Werbe Layer über die Seiten gezogen, zum Glück mit JavaScript.

  2. 2. – Kai Greve

    Kommentar vom 04. June 2005 um 13:29

    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. 3. – Daniele

    Kommentar vom 04. June 2005 um 22:49

    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. 4. – Robert Lechner

    Kommentar vom 06. June 2005 um 16:59

    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. 5. – Michael

    Kommentar vom 14. June 2005 um 14:21

    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

Hinweis:
Kostenloser WordPress-Newsletter
Wöchentl. Newsletter zu WordPress und verwandten Themen

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.