DIV positionieren (für Hover-Kästchen)

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo Experten,

wie kann ich ein zunächst ausgeblendeten DIV-Container, der beim Überfahren eines Wortes (Wort) mit der Maus eingeblendet werden soll, so positionieren, dass er stets genau am unteren Rand des Wortes, vielleicht mit ein paar Pixeln Abstand aufpoppt, egal, wo das Wort gerade ist? Mit position:absolute kann es IMHO nicht funktionieren. Wie aber stelle ich es mit position:relative an?

Gruß
Didi

#2

Hallo Didi,

z.B.

function popUp(text)
{
with (document.getElementById(‚dynDiv‘).style)
{
visibility = ‚visible‘;position = ‚absolute‘;
backgroundColor = ‚#c9e5e0‘;
top=window.event.clientY + document.body.scrollTop-20;
left=window.event.clientX + document.body.scrollLeft+20;
border = ‚3px solid #5cbec0‘;
}
document.getElementById(‚dynDiv‘).firstChild.nodeValue=text;
}
function hide()
{
document.getElementById(‚dynDiv‘).style.visibility= ‚hidden‘;
}

getestet nur unter MSIE!!!

im HTML der zu „belegende“ Bereich:

Inhalt des div

und „Irgendwo“
is noch egal

mfg

Dirk

#3

Hi Dirk,

wow! Danke für das Script. Ich dachte ursprünglich bloß, dass es mit simplen CSS-Angeben im ein- und auszublendenden Bereich etwas einfacher funktionieren könnte. Die JS-Lösung ist aber auch sehr nett.

Tschau
Didi

P.S.: Darf leider noch kein Sternchen geben. Hättest eines verdient.

#4

Hallo Didi,

Ich dachte ursprünglich bloß, dass
es mit simplen CSS-Angeben im ein- und auszublendenden Bereich
etwas einfacher funktionieren könnte.

vielleicht geht’s tatsächlich einfacher: http://aktuell.de.selfhtml.org/tippstricks/css/infob…

Deiner Beschreibung nach könnte die Lösung 1 zu Deinem Problem passen und das ganz ohne Script.

Schöne Grüße
Yasmin

#5

Hallo Yasmin,

Deiner Beschreibung nach könnte die Lösung 1 zu Deinem Problem
passen und das ganz ohne Script.

im von dir genannten Beispiel ist das Element absolut positioniert d.h. mit festem Abstand vom oberen und linken Rand des Anzeigenbereichs. Die Hover-Grafik liegt ebenfalls fest positioniert. Wenn ich aber ein einzelnes Wort im Textfluss als „Link“ gestalte und wünsche, dass mein Popup stets direkt bei dem Wort aufklappt, muss ich das schon dynamisch gestalten. Ich weiß ja vorher nicht, bei welcher Fenstergröße und welchem eingestellten Schriftgrad sich das Wort bzw. der Mauszeiger (beim Überfahren) gerade befindet. Das geht dann wohl doch nur mit JS. Oder mit style="{position:relative; [andere Angaben];}", so hoffte ich zumindest. Trotzdem vielen Dank für deine Mühe.

Lieben Gruß
Didi

#6

im von dir genannten Beispiel ist das Element absolut
positioniert

ja nu, Du müßtest das Beispiel schon an Deine Bedürfnisse anpassen… Die absolute Positionierung kann man einfach weglassen.

Gruß
Yasmin

#7

Hallo Yasmin,

ja nu, Du müßtest das Beispiel schon an Deine Bedürfnisse
anpassen… Die absolute Positionierung kann man einfach
weglassen.

nee, nee, das geht so nicht. Hier springt ganze Text mit. D.h. die Infobox überlagert nicht den restlichen Text, sondern sie verdrängt ihn nach unten. Kannst ja mal selbst probieren. Und zwar, weil hier mit Unterformaten gearbeitet wird. Ich kann so mit überfahren eines s oder s kein anderes ansteuern (welches überlagern und nicht verdrängen könnte). Das muss man schon mit JS lösen.

Wenn du dich an meine Vorgaben erinnerst (ein einziges Wort mitten im Textfluss, evtl. auch mehrere, dann das jeweilige Popup beim Wort bzw. Mauszeiger), stellst du schnell selbst fest, dass dein SelfHTML-Beispiel für vieles geeignet ist, aber leider nicht dafür.

Hab trotzdem vielen Dank für deine Bemühungen.

Lieben Gruß
Didi