Mausverfolgung über Text

[Thomas Busch]

Hallo

nach langem vergeblichen herumprobieren und im Internet rumsuchen sehe ich es als letzte Möglichkeit hier mein Problem zu beschreiben um es zu lösen.

Es geht darum, das ich eine einfache Textzeile habe. Bsp:

HEUTEISTEINSCHÖNERTAG

Nun soll mittels JavaScript gelöst werden, das "onmouseover" eine Pipe | an der Maus haftet mit der es möglich ist die Wörter voneinander zu trennen.
Sprich, befindet man sich mit der Maus zwischen "HEUTE" und "IST" vollführt man einen Mausklick und die Pipe bleibt wo sie ist:

HEUTE|ISTEINSCHÖNERTAG

und dann wieder von vorn.

Mein größtes Problem liegt darin, herauszufinden zwischen welchen Buchstaben die Maus sich gerade befindet, um die Pipe an der Stelle zu haben wo die Maus ist.

Kann mir jemand den zündenden Hinweis geben wie ich mein Problem lösen kann?

Vielen vielen Danke
MfG Thomas

[ChrisB]

Hi,

Mein größtes Problem liegt darin, herauszufinden zwischen welchen Buchstaben die Maus sich gerade befindet, um die Pipe an der Stelle zu haben wo die Maus ist.

Am einfachsten wird das wohl feststellbar sein, wenn du die Buchstaben auf einzelne Elemente, bspw. Spans, verteilst.
Über deren mouseover/-out-Events und Abfrage des Von- und Ziel-Elements dieser Events bekommst du dann die „Grenze“, die zuletzt überschritten wurde, heraus.

MfG ChrisB

[Thomas Busch]

Hi,

Mein größtes Problem liegt darin, herauszufinden zwischen welchen Buchstaben die Maus sich gerade befindet, um die Pipe an der Stelle zu haben wo die Maus ist.

Am einfachsten wird das wohl feststellbar sein, wenn du die Buchstaben auf einzelne Elemente, bspw. Spans, verteilst.
Über deren mouseover/-out-Events und Abfrage des Von- und Ziel-Elements dieser Events bekommst du dann die „Grenze“, die zuletzt überschritten wurde, heraus.

MfG ChrisB

hmm... das ist natürlich sehr umständlich, aber das könnte klappen...
Auf jeden Fall danke für den Denkanstoß, damit komme ich schonmal weiter!
Wie immer hätte man auch selbst drauf kommen können! :)

Danke, danke, danke!
MfG Thomas

[suit]

hmm... das ist natürlich sehr umständlich, aber das könnte klappen...

Eigentlich ist es sogar wesentlich einfacher als die Mausposition realtiv zu einer bestimmten Buchstabenposition zu errechnen.

Da die Buchstaben in proportionalschriften nicht gleich breit sind, musst du das Wort klonen, jeden Buchstaben in ein Element schreiben und die Breite des Elements abfragen - aus diesen Daten kannst du dan errechenn, wo sich der Cursor befindet.

Das macht es in Summe weitaus komplizierter als der Vorschlag von ChrisB.

[Licht]

Hallo,

mir würden spontan zwei Lösungen einfallen:
1. Eine Textarea benutzen (Was Du wohl eher nicht möchtest)
2. Einen Font mit gleicher Breite für alle Zeichen wählen und die Position errechnen:

  
font-family: monospace;  
font-size: 14px;  

  
element.onmousedown = function (event) {  
var x = Math.floor((event.pageX-element.offsetLeft)/8);  
alert(x);  
};  

Oder so in der Richtung. Ich programmiere auch grade einen Text-Editor mit HTML und JS. Sogar mit unterschiedlich eingefärbten Text-Abschnitten, welche sich wie bei deinem Problem trennen lassen.

Mfg Licht