JS: div folgt der Maus

Hallo,
ich bin Anfänger im Gebiet javascript und hab mir ein kleines Programm gebastelt. Dabei soll ein div-Container der Maus folgen, solange diese über einen anderen Container fährt.
Leider funktioniert das ganze nur im IE (sollte mindestens noch im FF laufen) und wenn ich scrolle geht es auch nicht mehr.
Kann sich das mal jemand anschauen?

http://php-kanti.bplaced.net/test/test.html

Gruss Slash

Also im Opera funktioniert es. Auch wenn man scrollt, allerdings ist dann das div, das der Maus folgt, so weit oben, daß es nicht mehr im Sichtbereich ist. Sprich es ist da und folgt der Maus, nur leider ist es nicht sichtbar.

selber effekt im google chrome… ich nehme an die koordinaten wurden relativ zum “inhalt” , also zum body oder html element (oder so ähnlich) angegeben, und nicht zum “fenster”.

Wie gesagt, Anfänger :wink:
Wahrscheinlich liegt es daran, aber wie kann ich das am Browserfenster ausrichten?
Meine Besucher haben nur IE oder FF, sollte also vor allem noch im FF laufen.

hm keine ahnung, probiers mit position:fixed; unten im style attribut. Vielleicht reicht das ja schon.

Du kannst das jQuery-Framework verwenden. Mit diesem lässt sich das sehr leicht umsetzen und es ist auch lauffähig auf jeden Browser.
Der Nachteil ist natürlich die Dateigröße

so gehts:

function ttMove(e) {
    if(!e) e = window.event; // objekt für den IE erzeugen
    document.getElementById('kasten').style.left = e.clientX + "px";
    document.getElementById('kasten').style.top = e.clientY + "px";
}

im FF/Netscape läuft event handling etwas anders…
ich würde bei solchen dingen auf frameworks setzten, die haben meist die beste/browserübergreifendste implementierung

Danke vielmals, jetzt funktionierts :sun:
Das scroll-Problem konnte ich tatsächlich mit fixed lösen und der Code funktioniert im FF.

Hallo, ich bins nochmal
Ich hab meine Seite mit einigen Browsern getestet, es funktioniert überall ausser in Opera (getestet in V10.10). Ich weiss, es gibt nicht viele mit diesem Browser, er sollte aber trotzdem berücksichtigt werden, man weiss ja nie. Ich habe keine Ahnung, wo das Problem liegt, kenne mich mit diesem Browser nicht aus.

http://php-kanti.bplaced.net/test/

Wie michi7x7 gesagt hat: nimm am besten ein Framework:
michi1234.bplaced.net/jquery_tooltip/index.xhtml

[size=50]PS: bitte übertreibs mit dem JavaScript nicht :wink: [/size]

Keine Sorge, das js kommt nur dezent auf einer Seite, nicht im Style :wink:

Wegen Framework, mir ist es wichtig, dass ich jeden Ablauf auf meiner Seite verstehe. Wäre also dankbar, wenn jemand mit Code oder Lösungsansatz weiterhelfen kann.

achja übrigens, .xhtml kann von meinem Standardbrowser IE8 nicht angezeigt werden, fals du vorhast, eine Seite in dem Format zu erstellen.

tja, nach langen versuchen hat sich gezeigt das bei opera eine funktion mit dem namen “text” einen fehler erzeugt(fehlermeldung: TypeError@Line1, vermutlich da opera schon eine funktion mit dem namen “text” definiert hat)
daher reicht es aus der funktion einen anderen namen zu geben.

zu deinem script: die funktion “bewegen” wird jedes mal aufgerufen wenn der user die maus bewegt (jedes pixel 1x, wenn der pc schnell genug ist). in einer interpretersprache wie js kann das auf älteren pc´s dazu führen das deine webseite langsam reagiert/scrollt usw.
eine bessere möglichkeit wäre es die funktion nur auszuführen wenn sich die maus über dem button befindet. [<img … onmousemove=“bewegen(event);”> ]

zum thema standard-browser: in der webentwicklung würde ich dir stark zu firefox raten (insbesondere mit den extensions firebug, webdeveloper toolbar & tidy), denn dieser ist am standardkonformsten, und wenn die website einmal im ff passt, kann man immernoch änderungen vornehmen um eine browserübergreifende darstellung/ausführung zu erreichen.

wenn du mal den ie8 installiert hast wirst du probleme haben deine seite im ie6/7 zu testen,
ein gutes tool um sich seine seiten dennoch in den alten browsern ansehen zu können ist IETester

Danke für die Hinweise und die Lösung :wink:
Wenn ich entwickle, laufen bei mir immer IE und FF parallel. Nach Fertigstellung wird die Seite jeweils mit den meistgenutzten Browsern getestet und durch dieses Programm gelassen.