[Erledigt] "Spezielles" Mouseover

[errox]

Hallo ich hab da ein "kleines" Problem.
Ich möchte gerne einen Link mit einem Mouseover Bild verknüpfen. Mit Googlehilfen krieg ich das nur so hin dass das Moseover genau so groß wie der Link sein muss ( als Bild )

Dann hätte ich aber einen Kilometerabstand von den einzelnen Links.

Aussehen soll das so:

Wenn ich den Mauszeiger über "diesen" Link halte, wird "dieses" Bild angezeigt.

Danke für die Hilfe!!

Lg errox

[Manko10]

Wo soll das denn angezeigt werden? Als Hintergrundbild des Links? Als Popup? Irgendwo anders auf der Seite?

[errox]

Nein. Ganz normal drauf. Soll ich am besten eine bsp. Skizze anfertigen?

[David]

Nur wenn es dadurch verständlicher wird.
Vielleicht ist Beispielcode auch eine gute Idee.

[errox]

Also so siehts aus wenn der Mauszeiger noch nicht drüber ist:

Und so wenn der Mauszeiger drüber ist:

[Manko10]

Ist das Bild denn fest in die Seite eingebettet oder hängt das am Mauszeiger?

[errox]

Das am Mauszeiger hängt. Ich hab eben was Herausgefunden:

Wenn ich den Code benutze ( als Link )

<a href="google.de" title="Text">Link</a>

Und den Mauszeiger drüberhalte steht dort "Text". Und ich will nicht dass dort Text steht sondern ein Bild gezeigt wird.

Wie geht das?

[David]

Wenn Du eine Javascript Bibliothek benutzt, nennt sich das meistens "tooltip"
Zum Beispiel die Demo zum Tooltip-plugin für jQuery: jQuery Tooltip Plugin Demo
Oder mit ExtJS: Manual:Widgets:ToolTip - Learn About the Ext JavaScript Library

[Manko10]

title geht nur mit Text. Aber vielleicht hilft dir das weiter: Tooltips per JavaScript / DHTML

...zu langsam.
Aber wenn es nur um die Tooltips geht, würde ich eher die Lib von Walter Zorn nehmen, da diese wirklich nur für Tooltips sind und kein ganzes Framework darstellen.
Wenn bei mir eine ExtJS-Seite laden muss, schlafe ich übrigens jedesmal ein.

[David]

Ja, ich wollte auch nur ein weiteres Beispiel neben jquery nennen und mir ist nichts anderes eingefallen

[Manko10]

Naja, Tooltips bieten sie doch eigentlich alle. prototype, script.aculo.us, mootols...

[David]

prototype, script.aculo.us, mootols...

Stellen sich nur die zwei Fragen, wieviele Javascript-Bibliotheken ich sonst noch nicht kenne und ob es was schadet

[Manko10]

Auch wieder wahr.

[errox]

Geht das nicht etwas einfacher? Weil ich möchte keine nicht selbstgeschriebende Bibliothek für eine "kleine" Funktion einfügen.

Oder mal anders gefragt: Wie kann ich in Javascript ein Bild anzeigen lassen?

[Montellese]

Du musst halt z.B. irgendwo ein verstecktes <img> Element haben, das du über eine ID ansprechen kannst und das absolut positioniert ist. Dann baust du bei den entsprechenden Links ein mouseover ein, das eine Funktion aufruft und als Parameter z.B. das zu zeigende Bild übergibt. Dann greifst du auf das versteckte <img> Element zu, änderst den src wert, machst es sichtbar und schon wird es angezeigt. Damit es dann noch am richtigen Ort angezeigt wird, musst du auf die X und Y Koordinaten der Maus zugreifen, wofür du aber ein Event brauchst. Dazu findest du aber garantiert was bei Google. Ich würde dir aber vorschlagen zuerst mal den Rest umzusetzen und dich erst dann um die Position des Bildes zu kümmern.