werbepopup

[marcus]

hallo zusammen,

kennt ihr dieses neue werbekonzept, wo innerhalb eines fliesstextes bestimmte buzzwords markiert und verlinkt sind? sobald man mit der maus drübergeht, popt ein kleines dhtml-menü mit passenden informationen auf.
habe jetzt leider kein beispiel zur hand, aber sollte man mittlerweile schonmal gesehen haben...

nun meine frage: habt jemand eine idee, wie das technisch gelöst ist?
der code kommt ja vom externen werbeanbieter, also steht dem ganzen nur ein JS-file zur verfügung. wie aber setzt sich der code vom js-include mit passendem popup an die richtige stelle vom fliesstext?

hat jemand nen theoretischen ansatz zur hand?

danke und gruß
marcus

[molily]

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

[lal]

Ich weiß nur das dieser nervige Mist u. a. IntelliTXT heißt. Alles weitere könntest Du im Javascript von denen nachgucken.
:)

Beispiel: www.golem.de da gibt es sowas.