Kleines popup-Fenster was "onmouseover" erscheint.

[kalle]

Hallo,

ich habe mal ein kleines "Popupfenster" gesehen das erschien ,wenn man über ein Bild ging. Fuhr man mit dem Mauszeiger über das Bild so bewegte sich auch das "Popup" mit.
Habe leider den Link nicht behalten.
Könnte irgendwer einen Link posten zu einer Seite wo sowas zu sehen ist oder mir erklären womit das gemacht ist, falls irgendwer weiß was ich meine? Habe es erstmal im Themenbereich Javascript angesiedelt ,geht es vielleicht auch mit CSS ?

THX

kalle

[Matze]

Nein das geht nur mit Java Script.
Popup habe ich schon mal gemacht jedoch noch nie mit dem Bewegen des geöffneten Fensters.

Die Lösungen die Ich dazu gesehen habe waren ohnehin mit Flash realisiert worden.

Mit Java Scrippt kannst Du den aktuellen stand des kursors ermitteln und entsprechend das Popup Bild positionieren.

Hilfe gibt hes hierzu im forum archiv dort gab es schon ein änhliches Posting wo jemand die zurück gelegte Strecke des Mauszeigers ermitteln wollte. Ich glaube das war im 2. oder 3. Quartal 2002 bzw. 1-2 Quartal 2003

Die bestimmung der Position des POP UP musst du dir aus der JS Doku im Selfhtml raussuchen.

[molily]

Hallo Kalle,

ich habe mal ein kleines "Popupfenster" gesehen das erschien ,wenn man über ein Bild ging. Fuhr man mit dem Mauszeiger über das Bild so bewegte sich auch das "Popup" mit.
Habe leider den Link nicht behalten.

http://www.bosrup.com/web/overlib/

Habe es erstmal im Themenbereich Javascript angesiedelt ,geht es vielleicht auch mit CSS ?

Jein, mit CSS kann man Elemente, welche sich innerhalb eines Elements (in der Regel des a-Elements) befinden, beim Überfahren mit der Maus besonders formatieren (sichtbar machen, Hintergrund wechseln usw.). Diese Elemente können natürlich relativ zum Elternelement positioniert sein (position:relative für das Elternelement und position:absolute und top/bottom/left/right für das Kindelement).

Ein einfaches Beispiel:

a {position:relative; text-decoration:underline;}
a span {display:none;}
a:hover {border-style:none;}
a:hover span {display:block; position:absolute; top:1.2em; left:0; width:5em; color:black; background-color:silver; text-decoration:none; padding:0.1em; border:thin solid navy;}

<p><a href="bla">linktext<span> zusatzinfo</span></a></p>

Der Zusatztext bewegt sich allerdings nicht mit.

Generelles Einblenden über CSS: http://www.meyerweb.com/eric/css/edge/popups/demo.html, http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm#beispiel2 und http://www.adaptivepath.com/team/ (Fotos und Liste des Team).

Mathias