Fabian: Dynamisches HTML bei einzelnen Zeichen ??

Hallo,

ich möchte gerne einzelne Zeichen darstellen, die beim Überfahren mit der Maus einen anderen Hintergrund bekommen, zusätzlich soll an einer anderen Stelle derselben Seite über eine Javascript-Funktion einige weitere Information zu dem Zeichen angezeigt werden.

Mir ist leider kein HTML-Element bekannt, dass einen Objektzugriff z.B. über die "id" ermöglicht, OHNE dass nach diesem Element eine neue Zeile im Fliesstext beginnt. Gerade das will ich ja nicht, die Zeichen sollen sich nahtlos aneinanderreihen. <DIV>..</DIV> z.B. löst immer einen Zeilenumbruch aus, auch das Verpacken eines einzelnen Zeichens in eine Tabelle geht nicht -ebenfalls Zeilenumbruch. Die Anzahl der ZEichen ist mir vorher nicht bekannt, deshalb kann ich keine "grosse" Tabelle mit einer entsprechenden Anzahl an Tabellenzellen reservieren.

Ich hab es dann mit dem Anchor <A></A> versucht. Dabei gibt es jedoch mehrere Probleme:

1.) Den Hintergrund kann ich über CSS auch mit a:hover verändern. Bei ein, zwei oder drei oder auch zehn Zeichen klappt das auch gut. Wenn ich aber 3000 Zeichen jeweils separat in einen <A HREF packe, kommt der Brwoser ganz schön ins Schwitzen. Bis das hover-Ereignis greift, verhegen schon mal 3-4 Sekunden (und der Lüfter meines 2GHz Centrino-Laptops steigert sich auf Höchstdrehzahl).

2.) Wenn ich zusätzlich in jeden Anchor ein "onMouseOver" packe, muss der Browser das Mausereignis zweimal verarbeiten: Einmal an den hover-Prozess schicken, darauf an meine Javascript-Funktion. Das müsste den Brwoser zusätzlich ausbremsen, oder? Geht das dann überhaupt? Ich habe keinen Aufruf meiner Javascript-Funaktion feststellen können, was aber auch daran liegen kann, dass der Browser schon mit dem hover-Ereignis mehr als ausgelastet ist.

Fazit-Frage: Weiss jemand, wie ich ein einzelnes Zeichen im Textfluss(!) dynamisch bearbeiten kann?

Vielen Dank ünd Grüsse,
Fabian

  1. Vorschlag:

    <span id="idA>A</span><span id="idB">B</span> usw.

    1. <span id="idA>A</span><span id="idB">B</span> usw.

      Aha!! Vielen Dank für den Hinweis. Ich wusste nicht, dass man im span-Element id's angeben kann.

      Es heisst ja immer, man sollte <span> so wenig wie möglich verwenden und die HTML-Elemente direkt formatieren. Aber in diesem Fall scheint es vielleicht die einzige Lösung zu sein.

  2. Hallo, Fabian,

    Mir ist leider kein HTML-Element bekannt, dass einen Objektzugriff z.B. über die "id" ermöglicht, OHNE dass nach diesem Element eine neue Zeile im Fliesstext beginnt.

    <span id=x0001>E</span>rster <span id=x9999>L</span>etzter

    auch mit <b> <i> usw.

    ... 3000 Zeichen

    Aha, ein chinesisches Online- Wörterbuch?

    Fazit-Frage: Weiss jemand, wie ich ein einzelnes Zeichen im Textfluss(!) dynamisch bearbeiten kann?

    Ja, aber mit 3000 HTML- Objekten hatte ich noch nicht das Vergnügen.

    Kalle

    1. <span id=x0001>E</span>rster <span id=x9999>L</span>etzter

      das 3.000 mal eingegeben, da sitzt du ja Wochen dran. Vielleicht könntest schon die Aufbereitung mit Javascript machen.

      Setze für <span ...> ein Zeichen, das sonst nicht im Text vorkommt, für </span> ein anderes, also etwa so;

      °E~rster °L~etzter

      Dann kannst du die Masse der ° - und ~ - Zeichen ersetzen und danach den einleitenen Tags eine lfd. id zuweisen.

      Habe mal ähnliches in einer Riesen- Tabelle angewendet, wo mir sonst die Übersicht verloren gegangen wäre:
      http://ww.aktivferien.de/erotik/was_wollen_frauen.htm

      Kalle

    2. Aha, ein chinesisches Online- Wörterbuch?

      :-)
      Nein. Ich missbrauche PHP und HTML für eine Dateivergleichsoperation. Ich will zwei Dateien auslesen, die Zeichen in einer Tabelle gegenüberstellen und unterschiedliche Zeichen rot anzeigen, zusätzlich soll beim MouseOver jedes Zeichens zur Übersichtlichkeit der Hintergrund des Zeichens geändert werden sowie in einer weiteren separaten Tabelle die Positionsnummer des Zeichens und der Hex-Wert angezeigt werden.

      Ich bin ohnehin der Meinung, dass Applikationsprogrammierung für ein bestimmtes Betrebssystem (z.B. Windows) nur noch in Spezialfällen gemacht werden sollte, z.B. wenn superschnelle Grafik mit Echtzeit-Ereignisbehandlung gebraucht wird. Alles andere kann man inzwischen mit PHP und HTML machen, notfalls mit .exe oder .bin -Aufrufen im PHP.

      1. Ich bin ohnehin der Meinung, dass Applikationsprogrammierung für ein bestimmtes Betrebssystem (z.B. Windows) nur noch in Spezialfällen gemacht werden sollte, ...

        Bin im Prinzip deiner Meinung.

        z.B. wenn superschnelle Grafik mit Echtzeit-Ereignisbehandlung gebraucht wird. Alles andere kann man inzwischen mit PHP und HTML machen, notfalls mit .exe oder .bin -Aufrufen im PHP.

        Du meinst, wenn PHP auf dem lokalen Netz läuft mit Zugriff auf alle Ressourcen? Wie druckt oder scannt PHP? Das ist dann wohl eine Anwendung für .exe.

        Aber PHP auf einem Unix- Host ist doch ziemlich eingeschränkt, weil es mit dem PC nur über den Browser kommunizieren kann. Und der macht den PC (wie in alten Zeiten) zum Terminal.

        Output: Bildschirm, Input: Tastatur. Und dann das Hochladen von Dateien mit der doch SEHR umständlichen Suche auf der Platte.

        Kalle

  3. Hallo Fabian.

    Fazit-Frage: Weiss jemand, wie ich ein einzelnes Zeichen im Textfluss(!) dynamisch bearbeiten kann?

    Du könntest <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload@title=beim Laden> den http://de.selfhtml.org/javascript/objekte/node.htm#node_value@title=Textinhalt des <http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=jeweiligen Elementes> <http://de.selfhtml.org/javascript/objekte/string.htm#split@title=in ein Array aufteilen> (Trennzeichen: ''). Danach http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title=entfernst du den Textinhalt.
    In einer Schleife http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=erzeugst du nun immer wieder ein span-Element, wessen http://de.selfhtml.org/javascript/objekte/document.htm#create_text_node@title=Textinhalt das Zeichen des aktuellen Schleifendurchlaufes ist. Ebenfalls in dieser Schleife http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängst du jeweils das aktuell erzeugte span-Element in das Element ein, aus dem der Textinhalt ursprünglich stammte.

    Hier das ganze einmal praktisch angewendet.

    Für das Problem mit Inline-Elementen wie em oder strong musst du dir natürlich noch etwas einfallen lassen. Außerdem kann das ganze Vorhaben bei sehr viel Text eine zu starke Beanspruchung für den Client werden.

    Einen schönen Freitag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]