onmousehove mini popup?

cgee · 25.10.2010, 16:02

Guten Tag liebe Community,

Ich bin leider ein absoluter Javascript Anfänger.

Ich suche den Quelltext für eine bestimmte Anwendung.
Ich erläutere mal:

Ich habe ein Bild und wenn ich mit dem Mauszeiger drauf bin, möchte ich, dass sich so ein kleines Infofenster direkt unter der Maus (Wie der Titel, welcher angezeigt wird, wenn man auf ein Bild die Maus hält). Dort sollen dann mehrere Informationen stehen.
Leider habe ich nichts im Internet gefunden, was dergleichen macht.
Das es geht weiß ich aufjedenfall - habe es auch mal selber programmiert, aber ist schon Jahre her.

Schonmal vielen Dank für eure Hilfe

rudygotya · 25.10.2010, 16:33

Such mal nach "javascript tooltip" da findeste jede Menge Bibliotheken.

TZP · 25.10.2010, 17:36

Was verstehst du denn unter "mehrere Informationen"? Wenn du da einen halben Roman hinschreiben willst, würde ich fast zu einem versteckten Div mit relativer/absoluter Position raten, welches mittels JS oder JQuery bei MouseOver bzw. MouseOut die Sichtbarkeit ändert.

halskrause · 25.10.2010, 18:55

In ToolTips kann man ja HTML reinschreiben.

Versuch mal den ToolTip-Plug in von jQueryTools. http://flowplayer.org/tools/index.html

cgee · 25.10.2010, 19:53

So also auf der Homepage habe ich mir was runtergeladen, aber keine Ahnung was ich damit machen soll

Würde aber die absolut beste Lösung sein.

Habe selber nun auch was gefunden.
Aber es geht nicht so richtig.

<html>
<head>
<title>Bauliste</title>
<script type="text/javascript">
wmtt = null;
document.onmousemove = updateWMTT;
function updateWMTT(e) {
if (wmtt != null && wmtt.style.display == 'block') {
x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft;
y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop;
wmtt.style.left = (x + 20) + "px";
wmtt.style.top = (y + 20) + "px";
}
}
function showWMTT(id) {
wmtt = document.getElementById(id);
wmtt.style.display = "block";
}
function hideWMTT() {
wmtt.style.display = "none";
}
</script>
</head>

<body>
<a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">
Unser Link
</a>
<div id="1" class="tooltip">Dies ist unser erster Tooltip</div>
</body>
</html>

//"Dies ist unser erster Tooltip" erscheint schon sofort.. dies soll nicht sein & natürlich soll man den Text sehen, wenn man auf den Link mit der Maus geht.

Kann mir jmd helfen?

mermshaus · 25.10.2010, 20:05

Was spricht denn gegen eine der fertigen Bibliotheken? Suchbegriffe: "javascript tooltip" oder "jquery tooltip".

Zum Beispiel: - http://craigsworks.com/projects/qtip/

cgee · 25.10.2010, 20:11

Schaut euch das mal an.
http://flowplayer.org/tools/demos/tooltip/index.htm

Ich habe mir den Quelltext einfach kopiert und es ging nicht.
Ich habe das Script runtergeladen und auch auf meinen Server gepackt. Geht auch net.
http://nippi01.ni.funpic.de/tooltip/bauliste.html

Ich frag mich aber wieso es nicht geht, weil es muss ja eig. gehen...

halskrause · 25.10.2010, 20:16

Auf deiner Beispielseite musst du noch jQuery einbinden. jQuery-Tools ist ein PlugIn für jQuery.

cgee · 25.10.2010, 20:19

Ich habe jetzt alles eingebindet, auch die Bilder..

Funktioniert jedoch immer noch nicht :/

Diese Tool Tips wären absolut perfekt, wäre klasse wenn wir das irgendwie hinbekommen würden

@edit: habe es nun mit was anderem hinbekommen, so wie ich es genau möchte.
Ich arbeit mal damit und melde mich

halskrause · 25.10.2010, 20:27

Der Klon auf deiner Seite funktioniert. Dir fehlt nur noch das Bild. "/img/black_arrow.png". Den musst du auch kopieren.
Du siehst es nur nicht, weil die Schrift auch weiß ist.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Browser refreshen durch Linkklick in einem PopUp Fenster	litterauspirna	JavaScript, Ajax und mehr	2	07.03.2010 11:33
[Erledigt] Fenster aus Popup heraus schliessen - Popup ist ein frameset	mooonikaaa	JavaScript, Ajax und mehr	26	02.01.2010 02:08
[Erledigt] Wert von Popup an Formular	ch.bielmeier	JavaScript, Ajax und mehr	4	31.10.2008 20:32
Neue Nachricht in DB = Popup	Schmuse	PHP Tipps 2008	1	20.10.2008 14:38
Popup, das 100% einer Grafik erreicht?	BartTheDevil89	PHP Tipps 2006	8	07.11.2006 14:37
bildanzeige popup öffnen/schließen	Dummy2006	HTML, Usability und Barrierefreiheit	10	09.06.2006 01:28
Daten von popup zu bestehender Seiter!	Broadcast	PHP Tipps 2006	4	07.06.2006 13:02
Seite wartet mit dem Laden bis das PopUp geschlossen wurde	Unknown	HTML, Usability und Barrierefreiheit	2	24.09.2005 16:03
popup reload	boehseronkel	HTML, Usability und Barrierefreiheit	1	03.08.2005 14:34
[Erledigt] Java, PHP und PopUp Variablen Übergeben.		PHP Tipps 2005	11	28.01.2005 21:01
[Erledigt] Übergabe an ein popup		PHP Tipps 2005	9	26.01.2005 16:42
per javascript ein popup aus einem popup öffnen		HTML, Usability und Barrierefreiheit	5	04.01.2005 15:09
Pic of the Day + Popup Funktion		PHP Tipps 2004-2	10	29.12.2004 14:54
Zugriff vom Popup auf andere Seite	Neo2k3	PHP Tipps 2004	2	05.08.2004 20:51

25.10.2010, 16:02
cgee Benutzer Registriert seit: 25.10.2010 Beiträge: 37 PHP-Kenntnisse: Anfänger	onmousehove mini popup? Guten Tag liebe Community, Ich bin leider ein absoluter Javascript Anfänger. Ich suche den Quelltext für eine bestimmte Anwendung. Ich erläutere mal: Ich habe ein Bild und wenn ich mit dem Mauszeiger drauf bin, möchte ich, dass sich so ein kleines Infofenster direkt unter der Maus (Wie der Titel, welcher angezeigt wird, wenn man auf ein Bild die Maus hält). Dort sollen dann mehrere Informationen stehen. Leider habe ich nichts im Internet gefunden, was dergleichen macht. Das es geht weiß ich aufjedenfall - habe es auch mal selber programmiert, aber ist schon Jahre her. Schonmal vielen Dank für eure Hilfe


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

25.10.2010, 16:33
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Such mal nach "javascript tooltip" da findeste jede Menge Bibliotheken. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

25.10.2010, 17:36
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	Was verstehst du denn unter "mehrere Informationen"? Wenn du da einen halben Roman hinschreiben willst, würde ich fast zu einem versteckten Div mit relativer/absoluter Position raten, welches mittels JS oder JQuery bei MouseOver bzw. MouseOut die Sichtbarkeit ändert.

25.10.2010, 18:55
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	In ToolTips kann man ja HTML reinschreiben. Versuch mal den ToolTip-Plug in von jQueryTools. http://flowplayer.org/tools/index.html

25.10.2010, 19:53
cgee Benutzer Registriert seit: 25.10.2010 Beiträge: 37 PHP-Kenntnisse: Anfänger	So also auf der Homepage habe ich mir was runtergeladen, aber keine Ahnung was ich damit machen soll Würde aber die absolut beste Lösung sein. Habe selber nun auch was gefunden. Aber es geht nicht so richtig. <html> <head> <title>Bauliste</title> <script type="text/javascript"> wmtt = null; document.onmousemove = updateWMTT; function updateWMTT(e) { if (wmtt != null && wmtt.style.display == 'block') { x = (e.pageX ? e.pageX : window.event.x) + wmtt.offsetParent.scrollLeft - wmtt.offsetParent.offsetLeft; y = (e.pageY ? e.pageY : window.event.y) + wmtt.offsetParent.scrollTop - wmtt.offsetParent.offsetTop; wmtt.style.left = (x + 20) + "px"; wmtt.style.top = (y + 20) + "px"; } } function showWMTT(id) { wmtt = document.getElementById(id); wmtt.style.display = "block"; } function hideWMTT() { wmtt.style.display = "none"; } </script> </head> <body> <a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#"> Unser Link </a> <div id="1" class="tooltip">Dies ist unser erster Tooltip</div> </body> </html> //"Dies ist unser erster Tooltip" erscheint schon sofort.. dies soll nicht sein & natürlich soll man den Text sehen, wenn man auf den Link mit der Maus geht. Kann mir jmd helfen?

25.10.2010, 20:05
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Was spricht denn gegen eine der fertigen Bibliotheken? Suchbegriffe: "javascript tooltip" oder "jquery tooltip". Zum Beispiel: - http://craigsworks.com/projects/qtip/ __________________ Blog \| Buch \| Kaloa

25.10.2010, 20:11
cgee Benutzer Registriert seit: 25.10.2010 Beiträge: 37 PHP-Kenntnisse: Anfänger	Schaut euch das mal an. http://flowplayer.org/tools/demos/tooltip/index.htm Ich habe mir den Quelltext einfach kopiert und es ging nicht. Ich habe das Script runtergeladen und auch auf meinen Server gepackt. Geht auch net. http://nippi01.ni.funpic.de/tooltip/bauliste.html Ich frag mich aber wieso es nicht geht, weil es muss ja eig. gehen...

25.10.2010, 20:16
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Auf deiner Beispielseite musst du noch jQuery einbinden. jQuery-Tools ist ein PlugIn für jQuery.

25.10.2010, 20:19
cgee Benutzer Registriert seit: 25.10.2010 Beiträge: 37 PHP-Kenntnisse: Anfänger	Ich habe jetzt alles eingebindet, auch die Bilder.. Funktioniert jedoch immer noch nicht :/ Diese Tool Tips wären absolut perfekt, wäre klasse wenn wir das irgendwie hinbekommen würden @edit: habe es nun mit was anderem hinbekommen, so wie ich es genau möchte. Ich arbeit mal damit und melde mich Geändert von cgee (25.10.2010 um 20:24 Uhr).

25.10.2010, 20:27
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Der Klon auf deiner Seite funktioniert. Dir fehlt nur noch das Bild. "/img/black_arrow.png". Den musst du auch kopieren. Du siehst es nur nicht, weil die Schrift auch weiß ist.