molily: werbepopup

Beitrag lesen

Hallo,

hat jemand nen theoretischen ansatz zur hand?

IntelliTXT heißt dieser Spaß.

Über das DOM hat JavaScript Zugriff auf den gesamten Text eines Dokuments. JavaScript kann alle Textknoten durchlaufen und gewisse Wörter darin suchen. Bei einem Fund wird der Textknoten durch vier andere ersetzt.

Beispiel:

<p>Wort Buzzword Wort</p>

Hat als DOM-Struktur:

p
  - Textknoten »Wort Buzzword Wort«

Im Textknoten steht das Buzzword, also wird der Knoten ersetzt durch:

p
  - Textknoten »Wort «
  - span
    - Textknoten »Buzzword«
  - Textknoten » Wort«

Sprich, es wird ein Element (span bietet sich an) um das Buzzword gelegt, der erste Knoten wird gekürzt und ein weiterer mit dem Resttext wird neu erzeugt. Dort wird dann weitergesucht.

Ich weiß nicht, ob IntelliTXT so vorgeht, wahrscheinlich machen die es sich viel einfacher, indem sie z.B. das innerHTML von document.body durchgehen und direkt darin mit Regulären Ausdrücken Buzzwords durch <span class="..." onclick="...">Buzzword</span> ersetzen.

Das eingefügte span-Elemente kann nun mit CSS formatiert werden und kann auch Event-Handler erhalten, z.B. mousover. Beim Click oder Mouseover kann man dann abfragen, wo das Element im Dokument liegt (this.offsetTop), und dort ein absolut positioniertes Element hin verschieben (top- und left-Werte).

In dem Element kann dann irgendeine Werbung stehen. Die kann man auch dynamisch vom Werbeserver nachladen, z.B. über JSONP. Das ist eine Methode, mit der man script-Elemente von fremden Servern einbindet und ihnen dabei einige Parameter sowie den Namen einer Callback-Funktion übergibt. Das Script ruft dann diese Funktion auf und übergibt ihr die angeforderten Daten.

Mathias