Deklaration ignoriert bei Tooltip

[henne32]

Hi,

ich möchte auf meiner Seite einen Tooltip beim Mouseover von bestimmten Bilder einbinden. Der Tooltip erscheint auch, allerdings an der falschen Stelle. Die Fehlerkonsole vom FF gibt mir den Fehler "Fehler beim Verarbeiten des Wertes für left/top. Deklaration ignoriert" aus.

Ich poste mal meinen Code. Es geht wohl hauptsächlich um die letztzen Zeile. Hat jemand ne Idee, wo ich nen Fehler gemacht habe:

function hideTooltip() {  
      document.getElementById('tooltip').style.visibility = "hidden";  
}  
  
function showTooltip(e,txt,offsetX,offsetY)  
{  
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}  
        if (offsetY) {offsety=offsetY;} else {offsety=0;}  
        var PositionX = 0;  
        var PositionY = 0;  
        if (!e) var e = window.event;  
        if (e.pageX || e.pageY)  
        {  
                PositionX = e.pageX;  
                PositionY = e.pageY;  
        }  
        else if (e.clientX || e.clientY)  
        {  
                PositionX = e.clientX + document.body.scrollLeft;  
                PositionY = e.clientY + document.body.scrollTop;  
        }  
        document.getElementById("text").innerHTML=txt;  
        document.getElementById("tooltip").style.left =  "(PositionX+offsetx)px";  
        document.getElementById("tooltip").style.top = "(PositionY+offsetx)px";  
        document.getElementById("tooltip").style.visibility = "visible";  
}

Das DIV für den Tooltip sieht wie folgt aus:

<div id="tooltip" style="position:absolute;top:180px;left:180px;z-index:1; visibility:hidden;">  
<span id="text"></span>  
</div>

Danke für eure Hilfe im Voraus!

Gruß

henne32

[Felix Riesterer]

Lieber henne32,

was glaubst Du wird als left-Wert hier zugewiesen?

document.getElementById("tooltip").style.left = "(PositionX+offsetx)px";

Liebe Grüße,

Felix Riesterer.

[henne32]

was glaubst Du wird als left-Wert hier zugewiesen?

document.getElementById("tooltip").style.left = "(PositionX+offsetx)px";

Ich glaube/hoffe zum einen der Wert, wo die Maus aktuell über dem Bild ist + der oben zusätzlich definierte Abstand. Das ganze dann noch mit px versehenen.

wenn ich es so schreibe läufts, aber dann fehlt die Angabe, wo die Maus gerade ist:

document.getElementById("tooltip").style.left = offsetx;

@Gunnar Bittersmann: Sorry für die Inline-Styles. Ich werds ändern ;)

Danke und Gruß

henne32

[Gunnar Bittersmann]

@@henne32:

nuqneH

document.getElementById("tooltip").style.left = "(PositionX+offsetx)px";

Ich glaube/hoffe zum einen der Wert, wo die Maus aktuell über dem Bild ist + der oben zusätzlich definierte Abstand. Das ganze dann noch mit px versehenen.

Nein, alles was innerhalb von "…" steht, wird als String behandelt. Das werden keine Zahlenwerte eingesetzt (JavaScript ist nicht PHP) und schon gar nicht addiert.

Die Variablen müssen also außerhalb von "…" stehen, nach der Addition kannst du dann eine Stringkonkatenation machen, um "px" anzuhängen:

document.getElementById("tooltip").style.left = (PositionX + offsetx) + "px";

Durch die Klammerung ist sichergestellt, dass die beiden '+' je nach Typ der Ausdrücke links und rechts davon unterschiedliches tun: addieren bzw. konkatenieren.

Qapla'

[henne32]

Hi,

danke euch beiden für die schnelle Hilfe. Es klappt jetzt...

Gruß

henne32

[henne32]

Hi,

mir ist bei obigem Skript im IE noch ein Fehler aufgefallen:

Das Mouseover ist bei mir zu sehen, wenn man über ein Bild mit der Maus fährt. Es sind immer 3 Bilder nebeneinander und dann so etwa 10 Reihen. Ab der 4. Reihe etwa wird im IE das Mouseover nicht mehr rechts unterhalb der Maus angezeigt, sondern einfach weiter oben.

Das führt dazu, dass wenn man weiter runter scrollt, der Mouseover-Layer nicht mehr zu sehen ist.

Ich denke es muss doch was an der Stelle sein, wo die Position der Maus "abgefragt" wird, oder?

Hat jemand eine Idee oder schonmal ein Ähnliches Problem gehabt?

Gruß & Danke!

henn32

[JürgenB]

Hallo henne32,

document.getElementById("tooltip").style.left = "(PositionX+offsetx)px";

du solltest dir mit
alert("(PositionX+offsetx)px");
ansehen, ob es wirklich der Wert ist, den du erwartest. Und dann versuch mal
alert((PositionX+offsetx)+"px");

Bei Zahlen wirkt der "+"-Operator als Addierer, hier in der Klammer, bei Strings dagegen als Verkettungsoperator, hier zwischen dem Klammerausdruck, der automatisch in einen Text umgewandelt wird, und dem String.

Gruß, Jürgen

[Gunnar Bittersmann]

@@henne32:

nuqneH

Die Fehlerkonsole vom FF gibt mir den Fehler "Fehler beim Verarbeiten des Wertes für left/top. Deklaration ignoriert" aus.

Womit der Fuchs unzweifelhaft recht hat.

Du möchtest dir nochmal genau ansehen, welche Werte du da zuweist:

document.getElementById("tooltip").style.left =  "(PositionX+offsetx)px";
        document.getElementById("tooltip").style.top = "(PositionY+offsetx)px";

Das DIV für den Tooltip sieht wie folgt aus:
<div id="tooltip" style="position:absolute;top:180px;left:180px;z-index:1; visibility:hidden;">

Inline-Styles, pfui!

Qapla'

[Blubb]

Hallo,

ich möchte auf meiner Seite einen Tooltip beim Mouseover von bestimmten Bilder einbinden

, was ganz wunderbar mit CSS und ohne JavaScript funktioniert.

Grüße

[Matthias Apsel]

Om nah hoo pez nyeetz, Blubb!

, was ganz wunderbar mit CSS und ohne JavaScript funktioniert.

Ich würde Javascript zumindest zur Unterstützung heranziehen, damit der Tooltip in jedem Fall lesbar bleibt.

Matthias

[Blubb]

Hallo,

Ich würde Javascript zumindest zur Unterstützung heranziehen, damit der Tooltip in jedem Fall lesbar bleibt.

Was meinst du mit "jedem Fall"? Ich kann mir gerade nicht vorstellen, wann das nicht so sein sollte?

Grüße

[Steel]

Moin!

Ich würde Javascript zumindest zur Unterstützung heranziehen, damit der Tooltip in jedem Fall lesbar bleibt.
Was meinst du mit "jedem Fall"? Ich kann mir gerade nicht vorstellen, wann das nicht so sein sollte?

Dann schmeiss mal deine Phantasie an. Lass Dir helfen, indem du einfach mal den rechten Rand des Fensters bis an ein Wort verschiebst, das mit einem Tooltip versehen ist.

[Blubb]

Hallo,

Dann schmeiss mal deine Phantasie an. Lass Dir helfen, indem du einfach mal den rechten Rand des Fensters bis an ein Wort verschiebst, das mit einem Tooltip versehen ist.

verdammt. In Zeiten der unbegrenzten Möglichkeiten ist mir das mit dem Rand überhaupt nicht eingefallen :-) Danke.

Grüße